/* ============================================================================
   Windex Widgets — Design Tokens
   Google design language. See DESIGN.md.

   This file is the ONLY place raw values live. styles.css consumes these
   variables and must never contain a literal hex value.
   ========================================================================= */

:root {
  /* ── Google brand palette — exact published values ────────────────────
     Used for brand marks, status dots, stars, accents: anywhere the colour
     is the message rather than a background for white text. */
  --g-blue-500:   #4285F4;
  --g-red-500:    #EA4335;
  --g-yellow-500: #FBBC04;
  --g-green-500:  #34A853;
  --g-grey:       #3C4043;
  --g-grey-500:   #9AA0A6;
  --g-black:      #000000;
  --g-white:      #FFFFFF;

  /* ── UI action colours ────────────────────────────────────────────────
     Google's own darker steps, used wherever white text sits on the fill.
     Brand 500s fail WCAG AA against white (Blue 3.56:1, Green 2.9:1,
     Red 3.7:1); these pass. This mirrors what Google ships in Cloud,
     Android and Workspace. */
  --color-primary:        #1A73E8;   /* Blue 700  — 4.5:1 on white */
  --color-primary-deep:   #1557B0;   /* Blue 800  — pressed */
  --color-primary-soft:   #E8F0FE;   /* Blue 50   — tinted surface */
  --color-primary-hairline:#D2E3FC;  /* Blue 100  — tinted border */

  --color-success:        #1E8E3E;   /* Green 700 — 4.6:1 on white */
  --color-success-deep:   #188038;
  --color-success-soft:   #E6F4EA;   /* Green 50 */

  --color-critical:       #D93025;   /* Red 700   — 4.8:1 on white */
  --color-critical-deep:  #B31412;
  --color-critical-soft:  #FCE8E6;
  --color-critical-strong:#C5221F;

  --color-attention:      #B06000;   /* Orange 800 — 4.6:1 on white */
  --color-attention-soft: #FEF7E0;   /* Yellow 50 */

  /* ── Ink-on-tint ────────────────────────────────────────────────────────
     Text colour for banners and chips that sit on the *-soft tints. The
     mid-tone action colours are tuned for white text on a solid fill; used as
     text ON a pale tint they hover near the AA floor and read washed out.
     These are Google's own dark variants and land around 7:1. */
  --color-primary-ink:    #174EA6;   /* Blue 900   on Blue 50   */
  --color-success-ink:    #0D652D;   /* Green 900  on Green 50  */
  --color-attention-ink:  #6D4000;   /* Orange 900 on Yellow 50 */
  --color-critical-ink:   #A50E0E;   /* Red 900    on Red 50    */

  /* ── Surfaces — Google's grey ramp ───────────────────────────────────── */
  --color-canvas:         #FFFFFF;
  --color-surface-soft:   #F8F9FA;   /* Grey 50  — page/canvas backdrop */
  --color-surface-alt:    #F1F3F4;   /* Grey 100 — inert fills, code wells */
  --color-hairline:       #DADCE0;   /* Grey 300 — inputs, dividers */
  --color-hairline-soft:  #E8EAED;   /* Grey 200 — card borders */

  /* ── Text ────────────────────────────────────────────────────────────── */
  --color-ink-deep:       #202124;   /* Grey 900 — headings */
  --color-ink:            #3C4043;   /* Google grey — body */
  --color-charcoal:       #5F6368;   /* Grey 700 — secondary */
  --color-slate:          #5F6368;
  --color-steel:          #80868B;   /* Grey 600 — captions */
  --color-stone:          #9AA0A6;   /* Google grey 500 — disabled */

  /* ── On-colour & disabled ────────────────────────────────────────────── */
  --color-on-primary:     #FFFFFF;
  --color-on-ink:         #FFFFFF;
  --color-disabled-bg:    #F1F3F4;
  --color-disabled-text:  #9AA0A6;
  --border-ghost:         #DADCE0;

  /* ── Typography ──────────────────────────────────────────────────────────
     Roboto is Google's own open typeface and the licensable stand-in for
     Google Sans, which is not publicly available. Machines that happen to
     have Google Sans installed pick it up first; everyone else gets Roboto,
     which shares its metrics closely. */
  --font-sans: 'Google Sans', 'Google Sans Text', Roboto, -apple-system,
               BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-features: normal;

  /* Google's type scale. Note the weights: 400 and 500 carry almost
     everything — 700 is rare. That restraint is most of the "Google look". */
  --type-display-size:    28px;
  --type-display-weight:  400;
  --type-display-lh:      36px;

  --type-headline-size:   22px;
  --type-headline-weight: 400;
  --type-headline-lh:     28px;

  --type-title-size:      16px;
  --type-title-weight:    500;
  --type-title-lh:        24px;

  --type-subtitle-size:   14px;
  --type-subtitle-weight: 500;
  --type-subtitle-lh:     20px;

  --type-body-size:       14px;
  --type-body-weight:     400;
  --type-body-lh:         20px;

  --type-body-lg-size:    16px;
  --type-body-lg-weight:  400;
  --type-body-lg-lh:      24px;

  --type-caption-size:    12px;
  --type-caption-weight:  400;
  --type-caption-lh:      16px;

  --type-label-size:      14px;
  --type-label-weight:    500;
  --type-label-lh:        20px;

  /* Google sets type at 0 tracking — no negative letter-spacing. */
  --type-tracking:        0;
  --type-tracking-wide:   0.25px;

  /* ── Spacing — 4px base, 8px step ────────────────────────────────────── */
  --space-xxs:         4px;
  --space-xs:          8px;
  --space-sm:         12px;
  --space-md:         16px;
  --space-base:       16px;
  --space-lg:         24px;
  --space-xl:         32px;
  --space-xxl:        40px;
  --space-xxxl:       48px;
  --space-section:    64px;
  --space-section-lg: 80px;

  /* ── Radius — Google's scale ─────────────────────────────────────────── */
  --radius-xs:        4px;
  --radius-sm:        4px;
  --radius-md:        8px;
  --radius-lg:        8px;    /* the default card/input radius */
  --radius-xl:       12px;
  --radius-xxl:      16px;
  --radius-xxxl:     28px;    /* large feature surfaces */
  --radius-feature:  28px;
  --radius-full:    100px;    /* every button, chip and pill */
  --radius-circle:   50%;

  /* ── Elevation — Google keeps surfaces flat; shadow means "floating" ─── */
  --shadow-none:   none;
  --shadow-subtle: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
  --shadow-panel:  0 1px 3px 0 rgba(60, 64, 67, .3), 0 4px 8px 3px rgba(60, 64, 67, .15);

  /* ── Motion — Material standard easing ───────────────────────────────── */
  --motion-fast:   100ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-medium: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-slow:   300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --container-max:  1280px;
  --rail-width:      400px;   /* 56px icon rail + panel */
  --topbar-height:    64px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast:   1ms linear;
    --motion-medium: 1ms linear;
    --motion-slow:   1ms linear;
  }
}