/* =============================================================================
   Blue Design Tokens - v1
   Built from the current Blue brand assets (orb palette, Blue Studio app,
   onboarding mockup). To be refined once the Figma is available.

   Usage:
     @import "design-tokens.css";   (or <link rel="stylesheet" ...>)
     Then reference variables, e.g. color: var(--color-ink);

   Light is the default (:root). Dark applies in two ways:
     1. Explicitly:  <html data-theme="dark">  (app toggle wins)
     2. By system:   prefers-color-scheme: dark (only when no data-theme set)

   Everything below is a CSS custom property. Do not hard-code brand hex in app
   code; always go through a semantic token (--color-*, --space-*, etc).
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------------
     1. BRAND RAMP (raw, theme-independent)
     The living aurora orb palette. These are the only raw hex values apps
     should know about; prefer the semantic tokens in section 2 for UI.
     --------------------------------------------------------------------------- */
  --blue-950: #000521; /* near-black ink, deepest */
  --blue-900: #001a52;
  --blue-800: #003084; /* deep */
  --blue-700: #0B2EDB; /* brand cobalt - the one accent */
  --blue-600: #250eeb; /* core */
  --blue-500: #1e43f9; /* bright */
  --blue-400: #4f7ef3; /* mid luminous */
  --blue-300: #88a4ff; /* highlight 1 */
  --blue-200: #b3cbff; /* highlight 2 */
  --blue-100: #cadeff; /* highlight 3 */
  --blue-50:  #eef3ff; /* wash */

  /* Signature gradient of the orb (cobalt core to luminous rim) */
  --brand-gradient: linear-gradient(180deg, var(--blue-500), var(--blue-700));
  --brand-gradient-orb: radial-gradient(
    circle at 50% 42%,
    var(--blue-100) 0%,
    var(--blue-300) 32%,
    var(--blue-600) 66%,
    var(--blue-800) 100%
  );

  /* ---------------------------------------------------------------------------
     1b. NAMED GRADIENTS  (all derived from the orb palette)
     Reusable as fills. Utility classes live in design-effects.css.
     --------------------------------------------------------------------------- */

  /* Primary button: SOLID brand cobalt. No gradient (operator call 2026-10-29).
     Depth comes from a soft drop shadow + a faint 1px top inner highlight,
     applied in the .btn-primary class (design-effects.css), not from the fill. */
  --gradient-button: var(--blue-700);
  --gradient-button-hover: var(--blue-800);
  /* The faint top sheen used as an inset highlight for a touch of depth. */
  --button-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.16);

  /* Soft page bloom: a barely-there cobalt glow in a corner of the background. */
  --gradient-bloom: radial-gradient(
    1100px 640px at 82% -16%,
    rgba(11, 46, 219, 0.10) 0%,
    rgba(11, 46, 219, 0.04) 36%,
    transparent 62%
  );

  /* Orb bloom: the soft halo that sits BEHIND the orb. No hard edges. */
  --gradient-orb-bloom: radial-gradient(
    circle,
    var(--blue-300) 0%,
    rgba(136, 164, 255, 0.22) 34%,
    transparent 66%
  );

  /* Accent glow: for the primary button shadow and orb halo only. */
  --gradient-accent-glow: radial-gradient(
    circle,
    rgba(11, 46, 219, 0.45) 0%,
    rgba(11, 46, 219, 0.14) 40%,
    transparent 70%
  );

  /* ---------------------------------------------------------------------------
     2. SEMANTIC COLOR - LIGHT (default theme)
     AA notes assume normal text (>= 4.5:1) unless marked "large" (>= 3:1).
     --------------------------------------------------------------------------- */

  /* Surfaces: page -> raised panel -> inset. Keep hierarchy shallow and calm. */
  --color-bg:        #f6f8fd; /* app background */
  --color-surface:   #ffffff; /* cards, panels, menus */
  --color-surface-2: #f3f6fd; /* inset fields, subtle wells */
  --color-surface-3: #e9eefb; /* hover fill on neutral rows */

  /* Ink: text and icons. */
  --color-ink:       #0a0f2c; /* primary text  - ~16:1 on surface, AA/AAA */
  --color-ink-muted: #545d7c; /* secondary text - ~6.3:1 on surface, AA   */
  --color-ink-faint: #8a92af; /* tertiary/placeholder - ~3.1:1, LARGE only */
  --color-ink-on-accent: #ffffff; /* text on cobalt fills - ~7.4:1, AA    */

  /* Lines and dividers. */
  --color-line:        rgba(10, 15, 44, 0.09);
  --color-line-strong: rgba(10, 15, 44, 0.14);

  /* Accent: a single cobalt. Used sparingly for primary action and focus. */
  --color-accent:        #0B2EDB;
  --color-accent-hover:  #0a28c4;
  --color-accent-ink:    #0B2EDB; /* accent used as text/icon on light surface, ~7:1 */
  --color-accent-wash:   rgba(11, 46, 219, 0.07); /* tint fill behind icons/badges */
  --color-accent-wash-2: rgba(11, 46, 219, 0.14);

  /* Semantic status. Tuned for AA text on light surfaces. */
  --color-good:      #0f9d6c; /* ~3.9:1 - use for icons/large text or pair w/ ink */
  --color-good-ink:  #0a7d55; /* ~4.9:1 - use for status text */
  --color-good-wash: rgba(15, 157, 108, 0.10);
  --color-warn:      #b5730a; /* ~4.5:1 */
  --color-warn-ink:  #955e08;
  --color-warn-wash: rgba(181, 115, 10, 0.12);
  --color-bad:       #d6304a; /* ~4.6:1 */
  --color-bad-ink:   #c22440;
  --color-bad-wash:  rgba(214, 48, 74, 0.10);

  /* ---------------------------------------------------------------------------
     3. TYPOGRAPHY
     Playfair Display for display/headings, Inter for everything else.
     --------------------------------------------------------------------------- */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Font sizes (type scale). */
  --text-display: 46px; /* hero only, Playfair */
  --text-h1:      38px; /* Playfair */
  --text-h2:      28px; /* Playfair */
  --text-h3:      20px; /* Playfair */
  --text-body:    16px; /* Inter */
  --text-small:   14px; /* Inter */
  --text-caption: 12px; /* Inter, labels/overline */

  /* Line heights. */
  --leading-display: 1.04;
  --leading-heading: 1.12;
  --leading-body:    1.6;
  --leading-snug:    1.45;

  /* Weights. */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Letter spacing. */
  --tracking-display: -0.01em;
  --tracking-body:    -0.006em;
  --tracking-caps:    0.16em; /* overlines / small caps labels */

  /* Measure (max line length). */
  --measure: 42ch;

  /* ---------------------------------------------------------------------------
     4. SPACING  (4px base scale)
     --------------------------------------------------------------------------- */
  --space-0:  0;
  --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:  48px;
  --space-10: 64px;
  --space-11: 80px;

  /* ---------------------------------------------------------------------------
     5. RADII
     --------------------------------------------------------------------------- */
  --radius-xs:   6px;
  --radius-sm:   9px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px; /* large cards / modal surfaces */
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------------
     6. ELEVATION (shadows) - soft, low, blue-tinted. Use sparingly.
     --------------------------------------------------------------------------- */
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(10, 15, 44, 0.05), 0 8px 22px -16px rgba(11, 46, 219, 0.28);
  --elevation-2: 0 1px 2px rgba(10, 15, 44, 0.04), 0 18px 44px -26px rgba(11, 46, 219, 0.30);
  --elevation-3: 0 2px 6px rgba(10, 15, 44, 0.06), 0 30px 64px -34px rgba(11, 46, 219, 0.36);
  /* Accent glow - for the primary button and the orb halo only. */
  --glow-accent: 0 10px 24px -12px rgba(11, 46, 219, 0.70);

  /* ---------------------------------------------------------------------------
     7. FOCUS RING  (always visible, never removed without a replacement)
     --------------------------------------------------------------------------- */
  --focus-ring-color: var(--color-accent);
  --focus-ring-width: 2.5px;
  --focus-ring-offset: 3px;
  --focus-ring-shadow: 0 0 0 3px rgba(11, 46, 219, 0.18); /* for inputs/inset */

  /* ---------------------------------------------------------------------------
     8. MOTION  (calm, slow, ethereal - tied to the orb)
     --------------------------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.24, 1); /* soft settle */
  --ease-entrance: cubic-bezier(0.16, 1, 0.30, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);

  --duration-instant: 120ms;
  --duration-fast:    180ms; /* hovers, small state */
  --duration-base:    240ms; /* screen/panel transitions */
  --duration-slow:    500ms; /* theme change, large reveals */

  /* Orb ambient timings - multi-second, barely-there life. */
  --orb-breathe: 7s;
  --orb-ripple:  10s;
  --orb-haze:    26s;

  /* ---------------------------------------------------------------------------
     9. LAYOUT / Z-INDEX helpers
     --------------------------------------------------------------------------- */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  30;
  --z-overlay: 40;
  --z-modal:   50;
  --z-toast:   60;

  /* Glass (use sparingly - sticky headers, floating rails, login card). */
  --glass-bg: color-mix(in srgb, var(--color-surface) 78%, transparent);
  --glass-bg-solid: var(--color-surface); /* @supports fallback */
  --glass-blur: blur(16px) saturate(140%);
  --glass-border: var(--color-line-strong);
  /* 1px top hairline highlight (bright at top, fades out). */
  --glass-highlight: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.70) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  --glass-shadow: var(--elevation-2);
}

/* =============================================================================
   DARK THEME
   Applied when html[data-theme="dark"] is set explicitly.
   ========================================================================== */
:root[data-theme="dark"] {
  --color-bg:        #070b16;
  --color-surface:   #111726;
  --color-surface-2: #0d1322;
  --color-surface-3: #1a2336;

  --color-ink:       #eaf0ff; /* ~15:1 on surface */
  --color-ink-muted: #9aa6c4; /* ~6.5:1 */
  --color-ink-faint: #6c768f; /* ~3.2:1, LARGE only */
  --color-ink-on-accent: #ffffff;

  --color-line:        rgba(170, 190, 255, 0.11);
  --color-line-strong: rgba(170, 190, 255, 0.18);

  /* On dark, lift the accent for contrast; keep cobalt for fills. */
  --color-accent:        #3b6bff;
  --color-accent-hover:  #5580ff;
  --color-accent-ink:    #9db5ff; /* accent as text on dark surface, ~7:1 */
  --color-accent-wash:   rgba(111, 147, 255, 0.14);
  --color-accent-wash-2: rgba(111, 147, 255, 0.22);

  --color-good:      #38d39a;
  --color-good-ink:  #4fe0ab;
  --color-good-wash: rgba(56, 211, 154, 0.14);
  --color-warn:      #ffcf5c;
  --color-warn-ink:  #ffd97a;
  --color-warn-wash: rgba(255, 207, 92, 0.15);
  --color-bad:       #ff8a90;
  --color-bad-ink:   #ff9ea3;
  --color-bad-wash:  rgba(255, 138, 144, 0.16);

  --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.40), 0 12px 30px -22px rgba(0, 0, 0, 0.65);
  --elevation-2: 0 1px 2px rgba(0, 0, 0, 0.45), 0 24px 60px -30px rgba(0, 0, 0, 0.75);
  --elevation-3: 0 2px 6px rgba(0, 0, 0, 0.50), 0 34px 72px -34px rgba(0, 0, 0, 0.82);
  --glow-accent: 0 12px 30px -14px rgba(59, 107, 255, 0.70);

  --focus-ring-color: #7f9bff;
  --focus-ring-shadow: 0 0 0 3px rgba(80, 120, 255, 0.30);

  --glass-bg: color-mix(in srgb, var(--color-surface) 72%, transparent);
  --glass-bg-solid: var(--color-surface);
  --glass-border: var(--color-line-strong);
  --glass-highlight: linear-gradient(
    180deg,
    rgba(170, 190, 255, 0.18) 0%,
    rgba(170, 190, 255, 0) 100%
  );
  --glass-shadow: var(--elevation-2);
}

/* System dark preference, only when the app has not pinned a theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:        #070b16;
    --color-surface:   #111726;
    --color-surface-2: #0d1322;
    --color-surface-3: #1a2336;

    --color-ink:       #eaf0ff;
    --color-ink-muted: #9aa6c4;
    --color-ink-faint: #6c768f;
    --color-ink-on-accent: #ffffff;

    --color-line:        rgba(170, 190, 255, 0.11);
    --color-line-strong: rgba(170, 190, 255, 0.18);

    --color-accent:        #3b6bff;
    --color-accent-hover:  #5580ff;
    --color-accent-ink:    #9db5ff;
    --color-accent-wash:   rgba(111, 147, 255, 0.14);
    --color-accent-wash-2: rgba(111, 147, 255, 0.22);

    --color-good:      #38d39a;
    --color-good-ink:  #4fe0ab;
    --color-good-wash: rgba(56, 211, 154, 0.14);
    --color-warn:      #ffcf5c;
    --color-warn-ink:  #ffd97a;
    --color-warn-wash: rgba(255, 207, 92, 0.15);
    --color-bad:       #ff8a90;
    --color-bad-ink:   #ff9ea3;
    --color-bad-wash:  rgba(255, 138, 144, 0.16);

    --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.40), 0 12px 30px -22px rgba(0, 0, 0, 0.65);
    --elevation-2: 0 1px 2px rgba(0, 0, 0, 0.45), 0 24px 60px -30px rgba(0, 0, 0, 0.75);
    --elevation-3: 0 2px 6px rgba(0, 0, 0, 0.50), 0 34px 72px -34px rgba(0, 0, 0, 0.82);
    --glow-accent: 0 12px 30px -14px rgba(59, 107, 255, 0.70);

    --focus-ring-color: #7f9bff;
    --focus-ring-shadow: 0 0 0 3px rgba(80, 120, 255, 0.30);

    --glass-bg: color-mix(in srgb, var(--color-surface) 72%, transparent);
    --glass-bg-solid: var(--color-surface);
    --glass-border: var(--color-line-strong);
    --glass-highlight: linear-gradient(
      180deg,
      rgba(170, 190, 255, 0.18) 0%,
      rgba(170, 190, 255, 0) 100%
    );
    --glass-shadow: var(--elevation-2);
  }
}

/* =============================================================================
   OPTIONAL BASE HELPERS
   Thin, non-opinionated. Apps may ignore these and bind tokens themselves.
   ========================================================================== */

/* Honor reduced motion everywhere. Orb ambient layers must self-disable too. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}

.blue-focus-ring:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.blue-measure {
  max-width: var(--measure);
  text-wrap: pretty;
}