/* =============================================================================
   Kalkulator.in — Design Tokens
   Source of truth: docs/design/01-tokens.md
   All components reference these variables; never hard-code hex in components.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Light theme (default)
   --------------------------------------------------------------------------- */
:root {
  /* --- Brand & action --- */
  --color-primary:         #1565C0;
  --color-primary-hover:   #0D47A1;
  --color-primary-pressed: #0A3A82;
  --color-primary-subtle:  #E3F2FD;
  --color-on-primary:      #FFFFFF;
  --color-focus-ring:      #1565C0;

  /* --- Surfaces --- */
  --color-bg:              #FFFFFF;
  --color-surface:         #FFFFFF;
  --color-surface-muted:   #F7F9FC;
  --color-surface-sunken:  #EEF2F7;
  --color-overlay:         rgba(15, 23, 42, 0.45);

  /* --- Text --- */
  --color-text:            #1A1A1A;
  --color-text-secondary:  #5F6B7A;
  --color-text-muted:      #8B95A5;
  --color-text-inverse:    #FFFFFF;

  /* --- Borders & dividers --- */
  --color-border:          #DDE3EC;
  --color-border-strong:   #C5CEDA;
  --color-divider:         #E8EEF5;

  /* --- Semantic --- */
  --color-success:         #2E7D32;
  --color-success-subtle:  #E8F5E9;
  --color-warning:         #E65100;
  --color-warning-subtle:  #FFF3E0;
  --color-danger:          #C62828;
  --color-danger-subtle:   #FFEBEE;
  --color-info:            #0277BD;
  --color-info-subtle:     #E1F5FE;

  /* --- Ads (neutral chrome) --- */
  --color-ad-slot-bg:      #F3F5F8;
  --color-ad-slot-label:   #8B95A5;

  /* --- Typography --- */
  --font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", "SF Mono",
               Menlo, Consolas, monospace;

  /* --- Type scale --- */
  --text-xs:   0.75rem;   /* 12px / lh 1.35 */
  --text-sm:   0.875rem;  /* 14px / lh 1.45 */
  --text-md:   1rem;      /* 16px / lh 1.55 */
  --text-lg:   1.125rem;  /* 18px / lh 1.5  */
  --text-xl:   1.25rem;   /* 20px / lh 1.4  */
  --text-2xl:  1.5rem;    /* 24px / lh 1.3  */
  --text-3xl:  1.75rem;   /* 28px / lh 1.25 */
  --text-4xl:  2rem;      /* 32px / lh 1.2  */

  /* --- Spacing (4px base unit) --- */
  --space-0:   0;
  --space-1:   0.25rem;   /* 4px  */
  --space-2:   0.5rem;    /* 8px  */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */

  /* --- Radius --- */
  --radius-sm:   0.25rem;  /* 4px  */
  --radius-md:   0.5rem;   /* 8px  */
  --radius-lg:   0.75rem;  /* 12px */
  --radius-pill: 999px;

  /* --- Elevation --- */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(15, 23, 42, 0.06);
  --elev-2: 0 4px 12px rgba(15, 23, 42, 0.08);
  --elev-3: 0 8px 24px rgba(15, 23, 42, 0.12);

  /* --- Motion --- */
  --motion-fast:       120ms;
  --motion-base:       180ms;
  --motion-slow:       240ms;
  --easing-standard:   cubic-bezier(0.2, 0, 0, 1);

  /* --- Touch & control sizing --- */
  --size-touch:        2.75rem;   /* 44px */
  --size-input-h:      3.25rem;   /* 52px */
  --size-input-h-lg:   3.5rem;    /* 56px */
  --size-btn-h:        3rem;      /* 48px */
  --size-btn-h-sticky: 3.25rem;   /* 52px */
  --size-icon:         1.25rem;   /* 20px */
  --focus-ring-width:  2px;
  --focus-ring-offset: 2px;

  /* --- Z-index scale --- */
  --z-base:        1;
  --z-sticky-sub:  50;
  --z-header:      100;
  --z-dropdown:    200;
  --z-offcanvas:   300;
  --z-modal:       400;
  --z-toast:       500;
}

/* ---------------------------------------------------------------------------
   Dark theme overrides
   Follows the user's operating system preference (no manual toggle).
   --------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
  --color-bg:              #121212;
  --color-surface:         #1E1E1E;
  --color-surface-muted:   #181818;
  --color-surface-sunken:  #2A2A2A;
  --color-overlay:         rgba(0, 0, 0, 0.6);

  --color-text:            #F1F3F4;
  --color-text-secondary:  #B0B8C4;
  --color-text-muted:      #8A93A0;
  --color-text-inverse:    #FFFFFF;

  --color-border:          #3A3F47;
  --color-border-strong:   #4A515C;
  --color-divider:         #2F333A;

  /* Primary: lighter blue for dark AA contrast */
  --color-primary:         #90CAF9;
  --color-primary-hover:   #BBDEFB;
  --color-primary-pressed: #64B5F6;
  --color-primary-subtle:  #0D2B4A;
  --color-on-primary:      #0A1929;
  /* Filled buttons in dark: use these instead of --color-primary */
  --color-primary-fill:    #1E88E5;
  --color-on-primary-fill: #FFFFFF;
  --color-focus-ring:      #90CAF9;

  --color-success:         #81C784;
  --color-danger:          #EF9A9A;
  --color-warning:         #FFB74D;

  --color-ad-slot-bg:      #2A2A2A;
  --color-ad-slot-label:   #8A93A0;

  /* Dark elevation: lighter shadows lose meaning; prefer borders */
  --elev-1: none;
  --elev-2: 0 4px 12px rgba(0, 0, 0, 0.3);
  --elev-3: 0 8px 24px rgba(0, 0, 0, 0.4);
  }
}

/* ---------------------------------------------------------------------------
   Reduced motion: collapse all durations to near-zero
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0.01ms;
    --motion-base: 0.01ms;
    --motion-slow: 0.01ms;
  }
}