/* YouCoach design tokens — from the Figma "YouCoach Website Design" file.
   Palette variables map to the Figma variable names 1:1. */
:root {
  --yc-teal:        #56B6C1;
  --yc-teal-dark:   #20809F;
  --yc-teal-medium: #40A2AF;
  --yc-orange:      #FFAD16;
  /* Deep navy for the evening slot's "now" border ring (Dez 2026-09-10).
     --yc-teal-dark (#20809F) read too teal against the sunrise/sunset
     palette; navy sits closer to the evening hero art (#1F2E5C). Use
     for evening-slot decoration only for now. */
  --yc-navy:        #1F2E5C;
  /* Soft warm accent for washes / backgrounds (d6 Sunrise concept,
     2026-09-10). Derived from --yc-orange at reduced saturation +
     higher luminance; too warm/dark for text, meant for large soft
     fills like the login gradient. Do NOT use for foreground text —
     contrast with --yc-body is insufficient for AA. */
  --yc-peach:       #FFD9B5;
  --yc-body:        #002C42;
  --yc-white:       #FFFFFF;
  --yc-grey:        #FAFAFA;
  --yc-black:       #000000;

  /* Activities — the ONLY greens (On Track pill) and reds (destructive
     outline / discard) in the app. Introduced 2026-09-08.
     The base hues stay as-is for DECORATION (progress bars, status dots,
     delete-button fills). Text use — status-pill labels, field errors,
     success/missed text — reads via the darker *-text tokens below, which
     pass WCAG AA 4.5:1 on white AND on the soft pill backgrounds (the base
     hues did not: green-on-mint was 2.4:1, red-on-pink 3.6:1). A11y pass
     2026-10-01. */
  --yc-success:      #5BA974;
  --yc-success-soft: #DFEFE3;
  --yc-success-text: #287045;  /* 5.0:1 on mint, 6.0:1 on white */
  --yc-danger:       #D44A4A;
  --yc-danger-soft:  #FBE7E7;
  --yc-danger-text:  #C0392B;  /* 4.6:1 on pink, 5.4:1 on white */
  --yc-hairline:     #E6EAEC;

  /* ── Semantic role tokens (dark-mode Slice A, 2026-09-11) ─────────
     Brand tokens above stay CONSTANT across themes — identity doesn't
     flip. Only ROLE tokens (bg/surface/fg/border) flip. Consumer sites
     in app.css should prefer these over brand tokens for anything
     surface-related. Dark overrides live at the bottom of this file. */
  --yc-bg:              #F5F7F8;
  --yc-surface:         var(--yc-white);
  --yc-surface-raised:  var(--yc-white);
  --yc-surface-inverse: var(--yc-body);

  --yc-fg:         var(--yc-body);
  --yc-fg-muted:   rgba(0, 44, 66, 0.65);
  /* Raised from 0.45 (2.7:1 — failed AA) to 0.66 so subtle meta text
     (timestamps, captions, hints) reads at ≥4.5:1. A11y pass 2026-10-01. */
  --yc-fg-subtle:  rgba(0, 44, 66, 0.66);
  --yc-fg-inverse: var(--yc-white);

  --yc-border:        var(--yc-hairline);
  --yc-border-strong: rgba(0, 44, 66, 0.15);

  --yc-hover:  rgba(0, 44, 66, 0.04);
  --yc-active: rgba(0, 44, 66, 0.08);
  --yc-backdrop: rgba(0, 44, 66, 0.45);

  --yc-btn-primary-bg: var(--yc-teal-dark);
  --yc-btn-primary-fg: var(--yc-white);
  --yc-btn-orange-bg:  var(--yc-orange);
  --yc-btn-orange-fg:  var(--yc-body);

  --yc-radius-sm: 6px;
  --yc-radius: 10px;
  --yc-radius-lg: 18px;
  --yc-radius-pill: 999px;
  /* Form-chip alias for the day/category/frequency chips on <activity-form>.
     Same shape as a pill — the alias keeps the intent obvious in CSS. */
  --yc-chip-radius: var(--yc-radius-pill);

  --yc-shadow-sm: 0 1px 2px rgba(0,44,66,0.08);
  --yc-shadow-md: 0 4px 12px rgba(0,44,66,0.12);

  /* 4px spacing scale */
  --yc-sp-1: 4px;
  --yc-sp-2: 8px;
  --yc-sp-3: 12px;
  --yc-sp-4: 16px;
  --yc-sp-5: 20px;
  --yc-sp-6: 24px;
  --yc-sp-8: 40px;

  /* Type scale (rem, 16px root) */
  --yc-fs-xs: 0.75rem;   /* 12 — pills, captions */
  --yc-fs-sm: 0.85rem;   /* 14 — labels, meta */
  --yc-fs-base: 1rem;    /* 16 — body, inputs, buttons */
  --yc-fs-lg: 1.05rem;   /* 17 — header title */
  --yc-fs-xl: 1.6rem;    /* 26 — screen titles */
  --yc-lh-tight: 1.25;
  --yc-lh-body: 1.5;
  --yc-fw-regular: 400;
  --yc-fw-medium: 500;
  --yc-fw-semibold: 600;
  --yc-fw-bold: 700;

  /* Keyboard focus ring. Switched from --yc-orange to --yc-teal-dark on
     2026-10-01: orange read ~1.8:1 against the app's near-white surfaces
     (below the 3:1 a focus indicator needs), and only 1.4:1 on the peach
     auth background. Teal-dark clears 3:1 on every light surface in the
     app (white 4.5, app-bg 4.2, peach 3.4, grey 4.3). */
  --yc-focus: 2px solid var(--yc-teal-dark);
  --yc-focus-offset: 1px;

  /* DM Sans is the primary UI font — headings and body. System stack is
     the fallback so first paint isn't blocked by the webfont fetch. */
  --yc-font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* Display / editorial serif — Fraunces, loaded via the Google Fonts
     link in index.html (already used on the marketing landing via
     --market-serif). Use for hero titles / warm-brand headings ONLY —
     NEVER for body copy, form fields, or any block of running text.
     Jeanndre-scoped for now: applied to the login "Welcome back" title
     as of 2026-09-10; broader roll-out needs sign-off. */
  --yc-font-display: "Fraunces", "Iowan Old Style", "Palatino",
                     Georgia, serif;

  /* Hero (Home landing) — sunny + moonlit sky gradients from the Figma. */
  --yc-hero-morning-from: #B4E2ED;
  --yc-hero-morning-to:   #7FC9D6;
  --yc-hero-evening-from: #1F2E5C;
  --yc-hero-evening-to:   #0B1636;
  --yc-hero-fg: var(--yc-white);
  --yc-radius-hero: var(--yc-radius-lg);
  --yc-hero-min-h: 148px;

  /* Google sign-in block (ADR-0010) - reserved heights so Google's late
     iframe or a failure note never moves the form. divider 20 + gap 8 +
     button 44 + gap 12 + help line + gap 12 + note. The help line is one
     44px row, or two rows (21 + 44) when it wraps; the note is one line
     (21) or two (42) below 400px. Height tokens only - no colour/type. */
  --yc-social-btn-h: 44px;
  --yc-social-line-h: calc(var(--yc-fs-sm) * var(--yc-lh-body));
  --yc-social-auth-min-h: calc(20px + var(--yc-sp-2) + var(--yc-social-btn-h) + var(--yc-sp-3)
    + 44px + var(--yc-sp-3) + var(--yc-social-line-h));
  /* 1024-1075px desktop panel (~348px content): the help line wraps. */
  --yc-social-auth-min-h-wrap: calc(20px + var(--yc-sp-2) + var(--yc-social-btn-h) + var(--yc-sp-3)
    + (var(--yc-social-line-h) + 44px) + var(--yc-sp-3) + var(--yc-social-line-h));
  /* Below 400px: the help line wraps and the note reserves two lines. */
  --yc-social-auth-min-h-narrow: calc(20px + var(--yc-sp-2) + var(--yc-social-btn-h) + var(--yc-sp-3)
    + (var(--yc-social-line-h) + 44px) + var(--yc-sp-3) + 2 * var(--yc-social-line-h));

  /* Bottom nav */
  --yc-nav-h: 64px;
  /* Alias — d6 asked for --yc-bottom-nav-h to mirror --yc-header-h.
     Both names point at the same 64px so old rules keep working. */
  --yc-bottom-nav-h: var(--yc-nav-h);
  /* Global app-header (d6 spec 2026-09-10) — one header per screen, min
     56px tall, sticky at top; carries [favicon] · [chevron?] · [title] ·
     [You-pill]. Sub-headers on individual screens (client-header,
     profile-header, thread-header) were removed the same day. */
  --yc-header-h: 56px;
  /* Motion tokens (d6 2026-09-10) — reuse for every accordion / drawer /
     tab transition so the app has ONE tempo instead of a dozen ad-hoc
     durations. Fast for chevrons / icon flips, standard for panel
     expand / cross-fade. */
  --yc-motion-fast:     180ms;
  --yc-motion-standard: 240ms;
  --yc-ease-out:        cubic-bezier(0.3, 0, 0, 1);

  /* Goals — category tint tokens (goal card left borders + type chips).
     Body/Soul reuse teal/success; Mind adds a soft purple used only for
     category tinting so it doesn't cross into interactive. Introduced
     2026-09-09. */
  --yc-cat-body:  #40A2AF;
  --yc-cat-mind:  #8B6FB8;
  --yc-cat-soul:  #5BA974;
  --yc-cat-other: #8A9AA3;

  /* "Needs Attention" pill uses --yc-warn (aliased to --yc-orange —
     orange = attention; do NOT introduce a new hue). */
  --yc-warn:      var(--yc-orange);
  --yc-warn-soft: #FFF3D6;
  /* Darker amber for TEXT on --yc-warn-soft (the Pro trial chip), chosen for
     WCAG AA like --yc-success-text / --yc-danger-text — orange itself is too
     light for AA text on the soft wash. */
  --yc-warn-text: #9A6400;
  --yc-progress-track: #EDEFF1;

  /* Notification prefs switch — aliases only, no new hues.
     Slice C of plan/notifications/ (2026-09-11). */
  --yc-switch-thumb:      var(--yc-white);
  --yc-switch-track-off:  var(--yc-progress-track);
  --yc-switch-track-on:   var(--yc-teal-dark);
  --yc-switch-focus-ring: rgba(32,128,159,0.20);

  /* Progress screen — soft sky teal for the Overall Progress hero card
     (distinct from --yc-teal which is deeper). Chunky chart bars by
     design; the four bars line up even when a category is zero, so we
     lock a fixed height + min-width. Introduced 2026-09-09. */
  --yc-progress-hero-bg: #7ECEDE;
  --yc-chart-bar-height: 120px;
  --yc-chart-bar-min-width: 32px;

  /* #92 — unified empty-state shell (Dez 2026-09-13). Every client
     empty state on Home / Activities / Journal / Reminders renders
     through `.empty-state` using these tokens. */
  --yc-empty-icon-size:    48px;
  --yc-empty-icon-color:   var(--yc-teal-dark);
  --yc-empty-title-font:   "Fraunces", Georgia, serif;
  --yc-empty-title-size:   var(--yc-fs-xl);
  --yc-empty-title-weight: var(--yc-fw-semibold);
  --yc-empty-body-color:   rgba(0, 44, 66, 0.70); /* was 0.60 (4.0:1, failed AA); now 5.5:1 */
  --yc-empty-body-width:   32ch;
}