/* ==================================================================
   FRENCH FRIES · DESIGN TOKENS (DUOLINGO DESIGN SYSTEM)

   Playful, chunky, tactile 3D design language inspired by Duolingo.
   Light is default; Dark is a rich night palette.
================================================================== */

:root {
  /* ------------------------------------------------ palette (light)
     Duolingo Feather inspired vibrant primitives. */
  --paper: #ffffff;
  --paper-2: #f7f7f7;
  --paper-3: #eef2f5;

  --ink-900: #3c3c3c;
  --ink-700: #4b4b4b;
  --ink-600: #777777;
  --ink-400: #afafaf;

  --line-1: #e5e5e5;
  --line-2: #d4d4d4;
  --line-3: #bbbbbb;

  /* Duolingo Brand Colors & 3D Shading */
  --duo-green: #58cc02;
  --duo-green-press: #46a302;
  --duo-green-shade: #46a302;

  --duo-blue: #1cb0f6;
  --duo-blue-press: #1899d6;
  --duo-blue-shade: #1899d6;

  --duo-orange: #ff9600;
  --duo-orange-press: #e58800;
  --duo-orange-shade: #e58800;

  --duo-red: #ff4b4b;
  --duo-red-press: #ea2b2b;
  --duo-red-shade: #ea2b2b;

  --duo-purple: #ce82ff;
  --duo-purple-press: #a559d9;
  --duo-purple-shade: #a559d9;

  --duo-gold: #ffc800;
  --duo-gold-press: #e5a500;
  --duo-gold-shade: #e5a500;

  /* The 6 Gear Hues */
  --gear-1: #58cc02;
  --gear-1-shade: #46a302;
  --gear-2: #ff4b4b;
  --gear-2-shade: #ea2b2b;
  --gear-3: #ce82ff;
  --gear-3-shade: #a559d9;
  --gear-4: #1cb0f6;
  --gear-4-shade: #1899d6;
  --gear-5: #ff9600;
  --gear-5-shade: #e58800;
  --gear-6: #ff6484;
  --gear-6-shade: #e04b68;

  /* ------------------------------------------------------ semantic */
  --bg: var(--paper);
  --bg-sunken: var(--paper-2);
  --bg-inset: var(--paper-3);

  --text: var(--ink-900);
  --text-muted: var(--ink-600);
  --text-subtle: var(--ink-400);
  --text-inverse: var(--paper);
  --on-brand: #ffffff;

  --line: var(--line-1);
  --line-strong: var(--line-2);

  --brand: var(--duo-green);
  --brand-press: var(--duo-green-press);
  --brand-shade: var(--duo-green-shade);

  --brand-blue: var(--duo-blue);
  --brand-blue-press: var(--duo-blue-press);
  --brand-blue-shade: var(--duo-blue-shade);

  --success: var(--duo-green);
  --success-shade: var(--duo-green-shade);
  --danger: var(--duo-red);
  --danger-shade: var(--duo-red-shade);
  --warning: var(--duo-orange);
  --warning-shade: var(--duo-orange-shade);

  /* washes */
  --wash-brand: #ddf4ff;
  --wash-success: #d7ffb8;
  --wash-danger: #ffdfe0;
  --wash-gear: color-mix(in srgb, var(--gear) 14%, transparent);

  --gear: var(--brand-blue);
  --gear-shade: var(--brand-blue-shade);

  color-scheme: light;

  /* ---------------------------------------------------------- type */
  --font-sans: system-ui, -apple-system, "DIN Next Rounded LT Pro", "Nunito", "Quicksand", "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --size-caption: 13px;
  --size-small: 15px;
  --size-body: 17px;
  --size-lead: 19px;
  --size-title: 24px;
  --size-display: 32px;
  --size-hero: 42px;

  --weight-regular: 500;
  --weight-medium: 600;
  --weight-semibold: 700;
  --weight-bold: 800;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.5;

  --tracking-tighter: -0.03em;
  --tracking-tight: -0.015em;
  --tracking-wide: 0.04em;
  --tracking-widest: 0.08em;

  /* --------------------------------------------------------- space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 72px;

  /* -------------------------------------------------------- radius */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-bubble: 20px;
  --radius-pill: 999px;

  /* ----------------------------------------------------- elevation */
  --shadow-pop: 0 8px 24px -6px rgb(0 0 0 / 15%);
  --shadow-card: 0 4px 0 var(--line-1);
  --shadow-card-active: 0 1px 0 var(--line-1);
  --ring: 0 0 0 3px var(--bg), 0 0 0 6px var(--brand-blue);
  --hairline: 2px solid var(--line);

  /* -------------------------------------------------------- motion */
  --dur-1: 90ms;
  --dur-2: 180ms;
  --dur-3: 260ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* -------------------------------------------------------- layout */
  --app-width: 560px;
  --gutter: var(--space-5);
  --control-height: 48px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---------------------------------------------------------- z-ix */
  --z-stage: 1;
  --z-tap: 3;
  --z-grade: 4;
  --z-appbar: 6;
  --z-toast: 40;
  --z-dialog: 50;
}

/* =================================================== dark override */
[data-theme='dark'] {
  --paper: #131f24;
  --paper-2: #0f171b;
  --paper-3: #1b2e35;

  --ink-900: #f1f7fb;
  --ink-700: #d0e1ea;
  --ink-600: #8ba2ad;
  --ink-400: #52656d;

  --line-1: #2b4652;
  --line-2: #385a69;
  --line-3: #4f778a;

  --duo-green: #58cc02;
  --duo-green-press: #46a302;
  --duo-green-shade: #2d6b00;

  --duo-blue: #1cb0f6;
  --duo-blue-press: #1899d6;
  --duo-blue-shade: #0e6592;

  --duo-orange: #ff9600;
  --duo-orange-press: #e58800;
  --duo-orange-shade: #9e5b00;

  --duo-red: #ff4b4b;
  --duo-red-press: #ea2b2b;
  --duo-red-shade: #a81c1c;

  --duo-purple: #ce82ff;
  --duo-purple-press: #a559d9;
  --duo-purple-shade: #6d2c99;

  --duo-gold: #ffc800;
  --duo-gold-press: #e5a500;
  --duo-gold-shade: #a87600;

  --gear-1: #58cc02;
  --gear-1-shade: #2d6b00;
  --gear-2: #ff4b4b;
  --gear-2-shade: #a81c1c;
  --gear-3: #ce82ff;
  --gear-3-shade: #6d2c99;
  --gear-4: #1cb0f6;
  --gear-4-shade: #0e6592;
  --gear-5: #ff9600;
  --gear-5-shade: #9e5b00;
  --gear-6: #ff6484;
  --gear-6-shade: #a82542;

  --text-inverse: #131f24;
  --wash-brand: #1b3d4f;
  --wash-success: #1a421b;
  --wash-danger: #4a1e23;

  --shadow-pop: 0 8px 28px -6px rgb(0 0 0 / 60%);
  --shadow-card: 0 4px 0 var(--line-1);
  --shadow-card-active: 0 1px 0 var(--line-1);

  color-scheme: dark;
}

/* Gear identity */
[data-gear='present'] { --gear: var(--gear-1); --gear-shade: var(--gear-1-shade); }
[data-gear='passe'] { --gear: var(--gear-2); --gear-shade: var(--gear-2-shade); }
[data-gear='imparfait'] { --gear: var(--gear-3); --gear-shade: var(--gear-3-shade); }
[data-gear='futur'] { --gear: var(--gear-4); --gear-shade: var(--gear-4-shade); }
[data-gear='conditionnel'] { --gear: var(--gear-5); --gear-shade: var(--gear-5-shade); }
[data-gear='subjonctif'] { --gear: var(--gear-6); --gear-shade: var(--gear-6-shade); }