/* ============================================================================
 * tokens.css — DIRECTION A "Cupertino" values (ENH-GLOBWEB-UI-REDESIGN)
 * AnyAI design tokens — Cupertino (Direction A). Swap landed 2026-07-04.
 * ----------------------------------------------------------------------------
 * Same token CONTRACT as the CP0 repo tokens.css (identical variable names) —
 * only the VALUES change, plus the explicit contract EXTENSIONS documented at
 * the top of NOTES.md (--radius-pill, --brand-hover, --btn-shadow[-hover],
 * --wash[-hover], --neutral-wash, --glass-edge, --ambient, --logo-chip-shadow).
 *
 * MECHANISM (the CP0 dark-only deferral ends here): default is LIGHT-first and
 * the prefers-color-scheme auto-switch is RESTORED (spec §8):
 *   :root                              -> Cupertino LIGHT   (default)
 *   @media (prefers-color-scheme:dark) -> Cupertino DARK    (OS dark, no pref)
 *   :root[data-theme="light"]          -> LIGHT             (explicit, wins)
 *   :root[data-theme="dark"]           -> DARK              (explicit, wins)
 * Every text/surface pair is WCAG-AA in both themes (ratios in NOTES.md).
 * Values sourced from the locked mockup direction_a.html (:root + .theme-*).
 * ========================================================================== */

/* --- LIGHT (default) ------------------------------------------------------- */
:root {
  /* Surfaces */
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #fbfbfd;
  --bg-well: #ececef;
  --shell-bg: #e8e8ee;
  --shell-surface: #f7f7f9;
  --glass: rgba(255, 255, 255, 0.68);

  /* Text */
  --ink: #1d1d1f;
  --ink-strong: #1d1d1f;   /* Cupertino separates headings by WEIGHT, not hue */
  --ink-muted: #55555e;    /* ~7.4:1 on --surface */
  --ink-dim: #646469;      /* darkened from mockup #6e6e76 -> AA on --bg-well */

  /* Lines */
  --hairline: rgba(29, 29, 31, 0.08);
  --shell-rule: rgba(29, 29, 31, 0.1);

  /* Brand */
  --brand: #004090;        /* white ink ~9.8:1 */
  --brand-ink: #ffffff;
  --brand-glow: rgba(0, 64, 144, 0.24);
  --brand-grad: linear-gradient(180deg, #1155a8, #004090);
  --text-grad: linear-gradient(135deg, #1d1d1f, #2f6fce);
  --link: #2b66c0;         /* darkened from mockup #2f6fce -> AA on --wash */

  /* Feedback */
  --ok: #1e7f3c;
  --warn: #b25000;         /* derived (mockup has no warn token) */
  --crit: #c0261f;         /* derived */

  /* Focus / elevation */
  --ring: rgba(43, 102, 192, 0.5);
  --shadow-card: 0 1px 2px rgba(18, 28, 48, 0.05), 0 5px 14px rgba(18, 28, 48, 0.06), 0 18px 44px rgba(18, 28, 48, 0.05);
  --shadow-hover: 0 2px 4px rgba(18, 28, 48, 0.06), 0 12px 28px rgba(18, 28, 48, 0.1), 0 30px 64px rgba(18, 28, 48, 0.09);

  /* Tour / tip */
  --tip-bg: #ffffff;
  --tip-border: rgba(29, 29, 31, 0.08);

  /* Logo */
  --logo: url('/brand/anyai-logo.png');
  --logo-chip-bg: transparent;

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t: 0.24s;

  /* Shape */
  --radius: 10px;
  --radius-lg: 18px;


  /* --- Contract EXTENSIONS (see NOTES.md) --- */
  --radius-pill: 999px;
  --brand-hover: #1155a8;
  --btn-shadow: 0 1px 2px rgba(0, 32, 80, 0.28), 0 5px 14px rgba(0, 64, 144, 0.24);
  --btn-shadow-hover: 0 2px 4px rgba(0, 32, 80, 0.3), 0 9px 22px rgba(0, 64, 144, 0.32);
  --wash: #eaf1fb;
  --wash-hover: #dce9f8;
  --neutral-wash: rgba(29, 29, 31, 0.055);
  --glass-edge: rgba(29, 29, 31, 0.08);
  --logo-chip-shadow: none;
  --ambient:
    radial-gradient(880px 360px at 16% -8%, rgba(47, 111, 206, 0.11), transparent 62%),
    radial-gradient(720px 320px at 86% -10%, rgba(0, 64, 144, 0.08), transparent 60%);
}

/* --- DARK (OS preference, when no explicit choice) ------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0e11;
    --surface: #1c1c21;
    --surface-2: #232329;
    --bg-well: #08080b;
    --shell-bg: #08080b;
    --shell-surface: #141418;
    --glass: rgba(21, 21, 26, 0.66);

    --ink: #f5f5f7;
    --ink-strong: #ffffff;
    --ink-muted: #c0c0c7;
    --ink-dim: #98989f;

    --hairline: rgba(255, 255, 255, 0.08);
    --shell-rule: rgba(255, 255, 255, 0.1);

    --brand: #2f6fce;
    --brand-ink: #ffffff;
    --brand-glow: rgba(47, 111, 206, 0.35);
    --brand-grad: linear-gradient(180deg, #3672cd, #2f6fce);
    --text-grad: linear-gradient(135deg, #f5f5f7, #78a9f9);
    --link: #78a9f9;

    --ok: #6fd495;
    --warn: #f0a03c;
    --crit: #ff6b6b;

    --ring: rgba(120, 169, 249, 0.5);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 22px rgba(0, 0, 0, 0.36);
    --shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.44), 0 14px 34px rgba(0, 0, 0, 0.5);

    --tip-bg: #2a2a31;
    --tip-border: rgba(255, 255, 255, 0.08);

    --logo-chip-bg: #f4f6fa;

    --brand-hover: #3672cd;
    --btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 5px 16px rgba(47, 111, 206, 0.3);
    --btn-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.4), 0 9px 24px rgba(47, 111, 206, 0.42);
    --wash: rgba(120, 169, 249, 0.15);
    --wash-hover: rgba(120, 169, 249, 0.24);
    --neutral-wash: rgba(255, 255, 255, 0.07);
    --glass-edge: rgba(255, 255, 255, 0.08);
    --logo-chip-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 3px 10px rgba(0, 0, 0, 0.4);
    --ambient:
      radial-gradient(880px 360px at 16% -8%, rgba(85, 144, 238, 0.17), transparent 62%),
      radial-gradient(720px 320px at 86% -10%, rgba(0, 64, 144, 0.22), transparent 60%);
  }
}

/* --- EXPLICIT LIGHT (user toggled light; always wins over OS) -------------- */
:root[data-theme="light"] {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #fbfbfd;
  --bg-well: #ececef;
  --shell-bg: #e8e8ee;
  --shell-surface: #f7f7f9;
  --glass: rgba(255, 255, 255, 0.68);

  --ink: #1d1d1f;
  --ink-strong: #1d1d1f;
  --ink-muted: #55555e;
  --ink-dim: #646469;

  --hairline: rgba(29, 29, 31, 0.08);
  --shell-rule: rgba(29, 29, 31, 0.1);

  --brand: #004090;
  --brand-ink: #ffffff;
  --brand-glow: rgba(0, 64, 144, 0.24);
  --brand-grad: linear-gradient(180deg, #1155a8, #004090);
  --text-grad: linear-gradient(135deg, #1d1d1f, #2f6fce);
  --link: #2b66c0;

  --ok: #1e7f3c;
  --warn: #b25000;
  --crit: #c0261f;

  --ring: rgba(43, 102, 192, 0.5);
  --shadow-card: 0 1px 2px rgba(18, 28, 48, 0.05), 0 5px 14px rgba(18, 28, 48, 0.06), 0 18px 44px rgba(18, 28, 48, 0.05);
  --shadow-hover: 0 2px 4px rgba(18, 28, 48, 0.06), 0 12px 28px rgba(18, 28, 48, 0.1), 0 30px 64px rgba(18, 28, 48, 0.09);

  --tip-bg: #ffffff;
  --tip-border: rgba(29, 29, 31, 0.08);

  --logo-chip-bg: transparent;

  --brand-hover: #1155a8;
  --btn-shadow: 0 1px 2px rgba(0, 32, 80, 0.28), 0 5px 14px rgba(0, 64, 144, 0.24);
  --btn-shadow-hover: 0 2px 4px rgba(0, 32, 80, 0.3), 0 9px 22px rgba(0, 64, 144, 0.32);
  --wash: #eaf1fb;
  --wash-hover: #dce9f8;
  --neutral-wash: rgba(29, 29, 31, 0.055);
  --glass-edge: rgba(29, 29, 31, 0.08);
  --logo-chip-shadow: none;
  --ambient:
    radial-gradient(880px 360px at 16% -8%, rgba(47, 111, 206, 0.11), transparent 62%),
    radial-gradient(720px 320px at 86% -10%, rgba(0, 64, 144, 0.08), transparent 60%);
}

/* --- EXPLICIT DARK (user toggled dark; always wins over OS) ---------------- */
:root[data-theme="dark"] {
  --bg: #0e0e11;
  --surface: #1c1c21;
  --surface-2: #232329;
  --bg-well: #08080b;
  --shell-bg: #08080b;
  --shell-surface: #141418;
  --glass: rgba(21, 21, 26, 0.66);

  --ink: #f5f5f7;
  --ink-strong: #ffffff;
  --ink-muted: #c0c0c7;
  --ink-dim: #98989f;

  --hairline: rgba(255, 255, 255, 0.08);
  --shell-rule: rgba(255, 255, 255, 0.1);

  --brand: #2f6fce;
  --brand-ink: #ffffff;
  --brand-glow: rgba(47, 111, 206, 0.35);
  --brand-grad: linear-gradient(180deg, #3672cd, #2f6fce);
  --text-grad: linear-gradient(135deg, #f5f5f7, #78a9f9);
  --link: #78a9f9;

  --ok: #6fd495;
  --warn: #f0a03c;
  --crit: #ff6b6b;

  --ring: rgba(120, 169, 249, 0.5);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 22px rgba(0, 0, 0, 0.36);
  --shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.44), 0 14px 34px rgba(0, 0, 0, 0.5);

  --tip-bg: #2a2a31;
  --tip-border: rgba(255, 255, 255, 0.08);

  --logo-chip-bg: #f4f6fa;

  --brand-hover: #3672cd;
  --btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 5px 16px rgba(47, 111, 206, 0.3);
  --btn-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.4), 0 9px 24px rgba(47, 111, 206, 0.42);
  --wash: rgba(120, 169, 249, 0.15);
  --wash-hover: rgba(120, 169, 249, 0.24);
  --neutral-wash: rgba(255, 255, 255, 0.07);
  --glass-edge: rgba(255, 255, 255, 0.08);
  --logo-chip-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 3px 10px rgba(0, 0, 0, 0.4);
  --ambient:
    radial-gradient(880px 360px at 16% -8%, rgba(85, 144, 238, 0.17), transparent 62%),
    radial-gradient(720px 320px at 86% -10%, rgba(0, 64, 144, 0.22), transparent 60%);
}