/**
 * GuessWatts - Design Tokens
 * 
 * Complete design system tokens.
 * All visual decisions derive from these tokens.
 * 
 * Colour: OKLCH, no fallback. A tint of a role is derived from it, oklch(from the role l c h / N),
 *   so the dark block redefines the roles and the tints follow
 * Fluid only where it shows (audit L-3, question 3): headings and the space above the card grow
 *   from 320 to 1280 px wide; UI text and spacing are static rem
 */

/* Layer order for every stylesheet. Declared here because tokens.css is the first file the
   pages link; a layer's rank is fixed the first time its name appears. */
@layer base, components, utilities;

/* Inter, self-hosted (Google Fonts v20 subsets, variable 400 to 700, SIL OFL 1.1 in
   vendor/fonts/OFL.txt). Portuguese needs only the latin subset; latin-ext loads on demand. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../vendor/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../vendor/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Native controls (select lists, the checkbox, scrollbars) follow the theme */
  color-scheme: light dark;
  
  /* ═══════════════════════════════════════════════════════════
     COLORS - one name per role (audit 4.16). OKLCH only: every browser the site targets reads it.
     ═══════════════════════════════════════════════════════════ */

  /* Ink: what borders and track tints are drawn with, black on light and white on dark */
  --color-ink: oklch(0% 0 0);
  /* Positive: the money-saved green of the savings bar, its tint and its glow */
  --color-positive: oklch(64.5% 0.053 161);
  
  /* Text */
  --color-text: oklch(40% 0.04 135); /* body and UI text */
  --color-text-strong: oklch(25% 0.02 145); /* headings and links (base.css), same hue as the accent */
  /* Secondary text: 4.9:1 on the page, 4.6:1 on the darkest surface that carries text (#E1E1E1) */
  --color-text-secondary: oklch(50% 0.01 0);
  --color-text-field: oklch(0% 0 0); /* typed and chosen values in form fields */
  --color-text-on-accent: oklch(96% 0 0); /* text on the dark accent (submit buttons) */
  /* Error text: 5.8:1 on the page, 5.4:1 on the darkest surface that carries text (#E1E1E1) */
  --color-error: oklch(48% 0.16 27);
  
  /* Backgrounds and surfaces */
  --color-bg: oklch(93% 0 0); /* page */
  --color-surface: oklch(100% 0 0);
  --color-surface-raised: oklch(95% 0 0); /* active tab, icon tiles, raised blocks */
  --color-surface-card: linear-gradient(90deg, oklch(95% 0 0) 1.07%, oklch(94% 0 0) 99.89%);
  --color-surface-overlay: var(--color-surface); /* opaque, so nothing shows through the copy menu */
  --color-bg-tabs: oklch(from var(--color-ink) l c h / 0.03); /* tabs track */
  --color-bg-drop-area: oklch(92% 0 0);
  --color-bg-drop-area-dragging: oklch(96% 0 0); /* lifts while a file is dragged over, as on dark; secondary text 5.3:1 */
  --color-bg-form-input: oklch(97% 0 0);
  --color-savings-bar-bg: oklch(from var(--color-positive) l c h / 0.08);
  --color-warning-soft: oklch(84.4% 0.172 85 / 0.1); /* amber, the data-age notice */
  
  /* Glass: white edges and translucent white fills, at an opacity per theme (dark mode retunes them) */
  --color-highlight: oklch(100% 0 0); /* the 0.5 to 1px inner edge on cards and buttons */
  --color-highlight-soft: oklch(100% 0 0 / 0.5);
  --color-highlight-strong: oklch(100% 0 0 / 0.75); /* form field edge */
  --color-divider: oklch(100% 0 0 / 0.3); /* rows in the result info */
  --color-divider-strong: oklch(100% 0 0 / 0.4); /* rows in the result card */
  --color-control: oklch(100% 0 0 / 0.2); /* button fill */
  --color-control-hover: oklch(100% 0 0 / 0.4);
  --color-control-subtle: oklch(100% 0 0 / 0.1);
  --color-surface-sunken: linear-gradient(180deg, oklch(0% 0 0 / 0.02) 64.03%, oklch(0% 0 0 / 0.016) 100%);
  --color-hover-tint: oklch(from var(--color-text) l c h / 0.04);
  --color-press-tint: oklch(from var(--color-text) l c h / 0.08);
  --color-backdrop: oklch(0% 0 0 / 0.5);
  
  /* Accent */
  --color-accent: oklch(25% 0.02 145);
  --color-accent-hover: oklch(20% 0.02 145);
  --color-accent-soft: oklch(from var(--color-accent) l c h / 0.08);
  
  /* Focus ring: every :focus-visible uses it (reset.css). 12.9:1 on the page background; on dark
     buttons the 2px offset leaves the page colour between button and ring */
  --color-focus-ring: var(--color-accent);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  
  /* Borders */
  --color-border: oklch(from var(--color-ink) l c h / 0.1);
  --color-border-strong: oklch(from var(--color-ink) l c h / 0.12);
  --color-border-dashed: oklch(from var(--color-ink) l c h / 0.16);
  --color-border-drag: oklch(from var(--color-ink) l c h / 0.32); /* drop area while a file is dragged over */
  --color-border-accent: oklch(from var(--color-accent) l c h / 0.4);
  
  /* ═══════════════════════════════════════════════════════════
     TYPOGRAPHY - static rem for UI text; the two heading steps grow from 320 to 1280 px
     ═══════════════════════════════════════════════════════════ */
  
  /* Font families */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Consolas, monospace; /* code and kbd only (base.css) */
  
  /* Font weights */
  --font-normal: 400; /* Regular weight */
  --font-medium: 500; /* Medium weight, default for UI */
  --font-semibold: 600; /* Semibold for emphasis */
  --font-bold: 700; /* Bold for headings */
  
  /* Typography Scale - XS (12px) */
  --text-xs-size: 0.75rem;
  --text-xs-weight: 500;
  --text-xs-leading: 1.6; /* unitless, so it scales with the text (about 19 px at 12 px) */
  --text-xs-tracking: 0;
  --text-caps-tracking: 0.05em; /* uppercase chips and badges */
  
  /* Typography Scale - SM (13px) */
  --text-sm-size: 0.8125rem;
  --text-sm-leading: 1.45; /* small print wraps over several lines on phones */
  
  /* Typography Scale - Base/Default (15px) */
  --text-base-size: 0.9375rem;
  --text-base-weight: 500;
  --text-base-leading: 1.4; /* unitless, so it scales with the text: 21 px at 15 px */
  --text-base-tracking: 0; /* body text keeps Inter's own spacing */
  
  /* Legacy aliases for backward compatibility */
  --text-default-size: var(--text-base-size);
  --text-default-weight: var(--text-base-weight);
  --text-default-leading: var(--text-base-leading);
  --text-default-tracking: var(--text-base-tracking);

  /* Long-form prose (sobre.html) */
  --text-prose-leading: 1.5;

  /* Typography Scale - MD (17px) */
  --text-md-size: 1.0625rem;
  
  /* Typography Scale - LG (h2, 20px at 320 → 24px at 1280) */
  --text-lg-size: clamp(1.25rem, 1.16666rem + 0.41667vw, 1.5rem);
  --text-lg-leading: 1.15;
  --text-lg-tracking: -0.02em;
  
  /* Typography Scale - XL (h1 and the typed amount, 24px at 320 → 30px at 1280) */
  --text-xl-size: clamp(1.5rem, 1.375rem + 0.625vw, 1.875rem);
  --text-xl-leading: 1.15;
  --text-xl-tracking: -0.02em;
  
  /* ═══════════════════════════════════════════════════════════
     SPACING - static rem; the vertical rhythm above the card is the fluid one
     ═══════════════════════════════════════════════════════════ */
  
  --space-1: 0.25rem; /* 4px */
  --space-1-5: 0.375rem; /* 6px: control padding, which until now borrowed --radius-sm (audit D-4) */
  --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 */
  
  /* ═══════════════════════════════════════════════════════════
     LAYOUT - Fluid scaling
     ═══════════════════════════════════════════════════════════ */
  
  /* Control heights: every button, tab and field is one of the two (data-size="sm" and "md") */
  --control-height-sm: 2rem; /* 32px */
  --control-height-md: 2.25rem; /* 36px */

  --content-width: clamp(20rem, 90vw, 36.25rem); /* 320px → 580px, responsive */
  --space-before-footer: 8.6875rem; /* 139px between the content and the footer */
  --drop-area-padding-end: 5.125rem; /* 82px under the drop area's text */
  --icon-box-sm: 1rem; /* 16px: the box a menu row's icon sits in */
  --space-top-card: clamp(4rem, 2.6667rem + 6.6667vw, 8rem); /* 64px at 320 → 128px at 1280 */
  --max-width-prose: 65ch; /* Optimal reading width */
  
  /* ═══════════════════════════════════════════════════════════
     BORDERS & RADIUS
     ═══════════════════════════════════════════════════════════ */
  
  --radius-sm: 0.375rem; /* 6px - Small radius for buttons, badges, pills */
  --radius-md: 0.5rem; /* 8px - Medium radius for cards, inputs */
  --radius-xl: 1rem; /* 16px - Extra large radius for main cards */
  
  /* ═══════════════════════════════════════════════════════════
     SHADOWS
     ═══════════════════════════════════════════════════════════ */
  
  /* Shadows are black and highlights white in both themes; the savings bar carries the positive
     green and the submit ring the accent */
  --shadow-xs: 0px 2px 4px 0px oklch(0% 0 0 / 0.02); /* Extra small shadow, subtle elevation */
  --shadow-md: 0px 4px 8px 0px oklch(0% 0 0 / 0.04); /* Medium shadow, cards */
  
  --shadow-inset-light: -2px 2px 8px 0px oklch(0% 0 0 / 0.04) inset,
                        2px -2px 8px 0px oklch(100% 0 0 / 0.3) inset; /* Light inset shadow, cards */
  --shadow-inset-dark: -1px 1px 4px 0px oklch(from var(--color-positive) l c h / 0.04) inset; /* Dark inset shadow, savings bar */
  --shadow-savings-bar: 0px 4px 8px 0px oklch(from var(--color-positive) l c h / 0.08); /* Savings bar outer shadow */
  
  --shadow-button: 0px 1px 2px 0px oklch(0% 0 0 / 0.3),
                   0px 0px 0px 1px var(--color-accent); /* Submit button shadow */
  --shadow-button-inset: 0px 1px 0px 0px oklch(100% 0 0 / 0.25) inset; /* Button inset highlight */
  
  --shadow-icon: 0px 0px 0px 0.5px oklch(0% 0 0 / 0.12),
                 0px 1px 4px 0px oklch(0% 0 0 / 0.08); /* Icon container shadow */
  --shadow-icon-inset: 1px -1px 2px 0px oklch(100% 0 0 / 0.5) inset,
                       -1px 1px 2px 0px oklch(0% 0 0 / 0.04) inset; /* Icon inset shadow */
  
  /* ═══════════════════════════════════════════════════════════
     ANIMATION - Timing and easing
     ═══════════════════════════════════════════════════════════ */
  
  /* Significa's tween scale (craft:motion): enter on the decelerate curve, exit at about 80% of the
     enter duration on the accelerate curve */
  --duration-micro: 100ms; /* hover and colour changes */
  --duration-fast: 150ms; /* dropdown, chevron, small UI */
  --duration-medium: 200ms; /* view swaps, result appear */
  --duration-slow: 300ms; /* the result card, the largest element */
  --duration-exit-fast: 120ms; /* pairs with fast */
  --duration-exit-medium: 160ms; /* pairs with medium */
  
  --ease-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); /* everything entering */
  --ease-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15); /* exits only */
  
  --stagger-delay: 30ms; /* Delay between staggered items (30 to 50 ms in UI) */
  
  /* Transitions */
  --transition-colors: color var(--duration-micro) var(--ease-emphasized-decelerate),
                       background-color var(--duration-micro) var(--ease-emphasized-decelerate),
                       border-color var(--duration-micro) var(--ease-emphasized-decelerate);
  
  /* ═══════════════════════════════════════════════════════════
     Z-INDEX - Layering system
     ═══════════════════════════════════════════════════════════ */
  
  --z-tabs-indicator: 0; /* Tab indicator, behind buttons */
  --z-tabs-buttons: 1; /* Tab buttons, above indicator */
  --z-dropdown: 1000; /* Dropdown menus */
  --z-skip-link: 1100; /* Skip link, above everything when focused */
}

/* ═══════════════════════════════════════════════════════════
   DARK THEME (audit 4.16a, ramp D-1): the light theme mirrored. Surfaces are near-neutral
   (chroma 0.004) and rise 3 to 4 points of L per layer, from the page at L 19% (#131413, the dark
   theme-color on both pages) to the surface at 31%; the green stays in text, links and the accent.
   The tints derived from a role follow it, and only those whose opacity differs on dark are
   restated. Contrast, computed: text 9.8:1 or more on every surface, secondary 5.3:1 or more,
   errors 5.4:1, the focus ring 9.3:1.
   ═══════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: oklch(90% 0.03 135);
    --color-text-strong: oklch(95% 0.02 145);
    --color-text-secondary: oklch(72% 0.01 145);
    --color-text-field: oklch(97% 0 0);
    --color-text-on-accent: oklch(19% 0.004 145); /* the page colour, on the light accent */
    --color-ink: oklch(100% 0 0);
    --color-error: oklch(74% 0.14 27);
    
    --color-bg: oklch(19% 0.004 145); /* #131413 */
    --color-surface: oklch(31% 0.004 145);
    --color-surface-raised: oklch(26% 0.004 145);
    --color-surface-card: linear-gradient(90deg, oklch(23% 0.004 145) 1.07%, oklch(22.5% 0.004 145) 99.89%);
    --color-bg-tabs: oklch(from var(--color-ink) l c h / 0.04);
    --color-bg-drop-area: oklch(17% 0.004 145); /* sunken, as on light */
    --color-bg-drop-area-dragging: oklch(24% 0.004 145);
    --color-bg-form-input: oklch(28% 0.004 145); /* raised above the card, as on light */
    --color-savings-bar-bg: oklch(from var(--color-positive) l c h / 0.16);
    --color-warning-soft: oklch(84.4% 0.172 85 / 0.12);
    
    --color-highlight: oklch(100% 0 0 / 0.08);
    --color-highlight-soft: oklch(100% 0 0 / 0.06);
    --color-highlight-strong: oklch(100% 0 0 / 0.12);
    --color-divider: oklch(100% 0 0 / 0.08);
    --color-divider-strong: oklch(100% 0 0 / 0.1);
    --color-control: oklch(100% 0 0 / 0.04);
    --color-control-hover: oklch(100% 0 0 / 0.08);
    --color-control-subtle: oklch(100% 0 0 / 0.03);
    --color-surface-sunken: linear-gradient(180deg, oklch(0% 0 0 / 0.12) 64.03%, oklch(0% 0 0 / 0.1) 100%);
    
    --color-accent: oklch(88% 0.05 140); /* light on dark: the submit fill and the focus ring */
    --color-accent-hover: oklch(94% 0.04 140);
    
    --color-border: oklch(from var(--color-ink) l c h / 0.12);
    --color-border-strong: oklch(from var(--color-ink) l c h / 0.16);
    --color-border-dashed: oklch(from var(--color-ink) l c h / 0.22);
    --color-border-drag: oklch(from var(--color-ink) l c h / 0.4);
    --color-border-accent: oklch(from var(--color-accent) l c h / 0.5);
    
    /* White inset highlights would glow on dark: they become faint */
    --shadow-inset-light: -2px 2px 8px 0px oklch(0% 0 0 / 0.2) inset,
                          2px -2px 8px 0px oklch(100% 0 0 / 0.03) inset;
    --shadow-button: 0px 1px 2px 0px oklch(0% 0 0 / 0.5),
                     0px 0px 0px 1px oklch(80% 0.04 135); /* a step below the accent; 3.1 reworks submit */
    --shadow-button-inset: 0px 1px 0px 0px oklch(100% 0 0 / 0.3) inset;
    --shadow-icon: 0px 0px 0px 0.5px oklch(0% 0 0 / 0.4),
                   0px 1px 4px 0px oklch(0% 0 0 / 0.3);
    --shadow-icon-inset: 1px -1px 2px 0px oklch(100% 0 0 / 0.04) inset,
                         -1px 1px 2px 0px oklch(0% 0 0 / 0.2) inset;
    --shadow-xs: 0px 2px 4px 0px oklch(0% 0 0 / 0.2);
    --shadow-md: 0px 4px 8px 0px oklch(0% 0 0 / 0.3);
  }
}