/* ============================================================
   cg-props.css – Copilot Gefahrgut
   ============================================================ */

:root {

  /* ── Colors ──────────────────────────────────────────────────── */

  --cg-color-bg:           #fafafa;
  --cg-color-bg-entry:     #ffffff;
  --cg-color-bg-sunken:    #f4f4f4;
  --cg-color-bg-transparent:  #ffffffc4;

  --cg-color-text-heading: #1D242C;
  --cg-color-text-2:       #3E4A56;
  --cg-color-text-3:       #6B7A8A;


  --cg-color-badge-title: #1D242C;

  --cg-color-highlight-dark:      #14B8A6;
  --cg-color-highlight-light:      #d5f1fd;
  --cg-color-highlight-3:      #f4d8cc;

  --cg-color-border:        #eaeaea;
  --cg-color-border-dark:   #c3c3c3;
  --cg-color-border-hover:  #c3c3c3;
  --cg-color-border-strong: #94a3b8;

  --cg-color-overlay:  rgba(19,25,32,0.6);
  --cg-color-tooltip: #1D242C;
  --cg-color-tooltip-font: #e8edf2;

  --cg-color-brand-border: #C7DCFA;
  --cg-color-brand-bg: #C7DCFA;
  
  --cg-color-brand-0: #d0e3f5;
  --cg-color-brand-1: #b3cfee;
  --cg-color-brand-2: #8dafe3;
  --cg-color-brand-3: #7a99da;
  --cg-color-brand-4: #607acb;
  --cg-color-brand-highlight: #E97720;
  --cg-color-success: #1e8449;
  --cg-color-warning: #b8480b;
  
  --cg-gradient-brand: linear-gradient(135deg, #8d9deb 0%, #5ac8f8 100%);
  --cg-gradient-background: linear-gradient(135deg, #e6ecff 0%, #edfaff 100%);
  /* ── Shadows ───────────────────────────────────────────────────────────── */

  --cg-shadow-1: 0 2px 2px rgba(29, 36, 44, 0.03);
  --cg-shadow-2: 0 4px 16px rgba(0,0,0,.12);

  /* ── Buttons → Impreza heading color as primary ────────────────────────── */

  --cg-btn-primary-bg:       var(--cg-color-brand-4);
  --cg-btn-primary-text:     var(--cg-color-bg);

  --cg-btn-secondary-bg:     #1D242C;
  --cg-btn-secondary-text:   var(--cg-color-bg);

  --cg-btn-tercer-bg:     #fafafa;
  --cg-btn-tercer-text:   #1D242C;
  --cg-btn-tercer-border:   #1D242C;


  /* ── Typography ──────────────────────────────────── */

  --cg-font-size-xs:  0.75rem;   /* 12px */
  --cg-font-size-sm:  0.875rem;  /* 14px */
  --cg-font-size-md:  1rem;
  --cg-font-size-lg:  1.125rem;
  --cg-font-size-xl: 1.8rem;

  --cg-font-weight-normal: 500;
  --cg-font-weight-bold:   800;

  --cg-line-height-tight:  1.2;
  --cg-line-height-normal: 1.5;
  --cg-line-height-loose: 1.7;

  --cg-letter-spacing-wide: 0.04em;


  /* ── Spacing (4px base) ────────────────────────────────────────────────── */

  --cg-space-1:  4px;
  --cg-space-2:  8px;
  --cg-space-3: 12px;
  --cg-space-4: 16px;
  --cg-space-5: 20px;
  --cg-space-6: 24px;
  --cg-space-8: 32px;
  --cg-space-12: 48px;
  --cg-space-button-top: 8px;
  --cg-space-button-side: 20px;

  /* ── Widths (400px base) ────────────────────────────────────────────────── */
  --cg-widget-width: 420px;
  --cg-widget-width-wide: 600px;

  /* ── One radius ────────────────────────────────────────────────────────── */

  --cg-radius-outer:    8px;
  --cg-radius-inner:    4px;
  --cg-radius-badge:    10px;
  --cg-input-min-height: 47px;


  /* ── Z-index ───────────────────────────────────────────────────────────── */

  --cg-z-modal: 9999;

  /* ── Motion ────────────────────────────────────────────────────────────── */

  --cg-duration-normal: 200ms;
  --cg-ease-1:   ease-in-out;

  /* ── Misc ──────────────────────────────────────────────────────────────── */

  --svg-medium: 18px;
  --svg-large: 24px;

   /* ── Modal ─────────────────────────────────────────────────────────────── */
  --cg-modal-gap:          clamp(12px, 4vw, 32px);
  --cg-modal-max-width:    860px;
  --cg-modal-max-width-sm: 540px;
  --cg-color-danger:       #c0392b;

}

/* ── Dark mode ─────────────────────────────────────────────────────────── */

[data-theme="dark"],
body.us-dark-mode,
html.us-color-scheme-on {


  /* ── Colors ──────────────────────────────────────────────────── */
  --cg-color-bg:           #131920;
  --cg-color-bg-entry:     #343739;
  --cg-color-bg-sunken:    #131920;
  --cg-color-bg-transparent:  #131920;

  --cg-color-text-heading: #e8edf2;
  --cg-color-text-2:       #b0bac6;
  --cg-color-text-3:       #8793a1;
  --cg-color-badge-title: #1c232d;

  --cg-color-highlight-dark:      #0a8275;
  --cg-color-highlight-light:      #00433b;
  --cg-color-highlight-3:      #2a0c00;

  --cg-color-border:        #525252;
  --cg-color-border-hover:  #3d4f63;
  --cg-color-border-strong: #4a5568;

  --cg-color-overlay: rgba(0,0,0,.65);

  --cg-gradient-brand: linear-gradient(135deg, #8d9deb 0%, #5ac8f8 100%);
  --cg-gradient-background: linear-gradient(135deg, #222c5a 0%, #13526e 100%);

  --cg-color-brand-border: #3d4f63;
  --cg-color-brand-bg: #738eab;

  --cg-color-brand-0: #232b43;
  --cg-color-brand-1: #3b4a74;
  --cg-color-brand-2: #435690;
  --cg-color-brand-3: #5066b2;
  --cg-color-brand-4: #607acb;
  --cg-color-brand-highlight: #E97720;
  --cg-color-success: #32b669;
  --cg-color-warning: #e06928;


  /* ── Buttons ────────────────────────── */

  --cg-btn-primary-bg:       var(--cg-color-brand-4);;
  --cg-btn-primary-text:     var(--cg-color-bg);

  --cg-btn-secondary-bg:     var(--cg-color-brand-4);
  --cg-btn-secondary-text:   var(--cg-color-bg);

  --cg-btn-tercer-bg:     var(--cg-color-bg);
  --cg-btn-tercer-text:   #fafafa;
  --cg-btn-tercer-border: #fafafa;

   /* ── Modal ─────────────────────────────────────────────────────────────── */
  --cg-modal-gap:          clamp(12px, 4vw, 32px);
  --cg-modal-max-width:    860px;
  --cg-modal-max-width-sm: 540px;
  --cg-color-danger:       #c0392b;
}