/* =====================================================================
   Browns Digital Studio — Browns Digital UI design tokens
   Pure presentation layer. All component colours reference these tokens.

   Dark palette (canonical — Browns Digital UI):
     Page #0a0a0a · surfaces #0f0f0f / #111111 / #1a1a1a
     --color-tint-fill #355cff (CTA / solid fills, both modes; white text AA)
     --color-tint #5b8cff on dark (text/links only; 6.64:1 on #0a0a0a)
     One dark theme: data-theme="dark" / data-bd-theme="dark".
     Do not put lighter blues (#5b8cff / #7c8cff) on CTA fills.
===================================================================== */

/* ---------- motion ---------- */
:root{
  --motion-spring:cubic-bezier(0.34,1.56,0.64,1);
  --motion-page:cubic-bezier(0.25,0.46,0.45,0.94);
  --motion-dismiss:cubic-bezier(0.55,0,1,0.45);
  --motion-hover:120ms ease-out;
  --motion-micro:200ms var(--motion-spring);
  --motion-page-dur:350ms;
  --motion-dismiss-dur:250ms;

  /* ---------- typography (Dynamic Type scale) ---------- */
  /* UI/marketing: system stack (matches --bd-a-font / Sep 2026 decision). Do not name unloaded webfonts. */
  --font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-display:var(--font-ui);
  --font-text:var(--font-ui);
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --font-editorial:var(--font-ui);

  --type-large-title:34px;
  --type-title-1:28px;
  --type-title-2:22px;
  --type-title-3:20px;
  --type-headline:17px;
  --type-body:17px;
  --type-callout:16px;
  --type-subhead:15px;
  --type-footnote:13px;
  --type-caption-1:12px;
  --type-caption-2:11px;

  --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;

  --hit-min:44px;
  --hit-comfort:44px;
  --pill-notch-h:48px;
  --pill-notch-h-compact:44px;
  --sidebar-w:260px;

  /* ---------- Brand mesh (auth signature — stop values must stay fixed) ---------- */
  --bd-brand-1:#5b8cff;
  --bd-brand-2:#355cff;
  --bd-brand-3:#1e3a8a;
  --bd-brand-glow:rgba(168,196,255,.95);
  --bd-brand-glow-2:rgba(122,162,255,.8);
  /* Solid form of brand glow — use instead of one-off #a8c5ff / #a8c4ff */
  --color-tint-soft:#a8c4ff;
  --bd-gradient-linear:linear-gradient(135deg,#5b8cff 0%,#355cff 46%,#1e3a8a 100%);
  --bd-gradient-mesh:
    radial-gradient(ellipse 65% 55% at 12% 10%,rgba(168,196,255,.95) 0%,transparent 58%),
    radial-gradient(ellipse 60% 55% at 88% 88%,rgba(122,162,255,.8) 0%,transparent 55%),
    linear-gradient(135deg,#5b8cff 0%,#355cff 46%,#1e3a8a 100%);
  --bd-gradient-soft:
    radial-gradient(ellipse 70% 50% at 8% -10%,color-mix(in srgb,#5b8cff 22%,transparent) 0%,transparent 55%),
    radial-gradient(ellipse 55% 45% at 92% 0%,color-mix(in srgb,#355cff 14%,transparent) 0%,transparent 50%),
    radial-gradient(ellipse 60% 40% at 50% 110%,color-mix(in srgb,#1e3a8a 8%,transparent) 0%,transparent 55%);
  --bd-shadow-brand:0 4px 18px color-mix(in srgb,#355cff 32%,transparent),0 1px 3px color-mix(in srgb,#1e3a8a 18%,transparent);
  --bd-shadow-brand-hover:0 8px 28px color-mix(in srgb,#355cff 40%,transparent),0 2px 6px color-mix(in srgb,#1e3a8a 20%,transparent);
  /* Radius scale (Browns Digital UI). One set for app and marketing.
     xs 6 kbd/badges · sm 7 buttons and inputs · md 12 cards and menus
     lg 20 panels · xl 28 hero tiles · pill capsules. */
  --r-xs:6px;
  --r-sm:7px;
  --r-md:12px;
  --r-lg:20px;
  --r-xl:28px;
  --r-pill:9999px;
  --r-control:var(--r-sm);
  --r-input:var(--r-sm);
  --r-card:var(--r-md);
  --r-card-lg:var(--r-lg);
  --r-card-xl:var(--r-xl);
  --r-shell:var(--r-lg);
}

/* ---------- Light (default — zero-dependency :root) ---------- */
:root,
:root[data-bd-theme="light"]{
  --color-bg-primary:#f5f5f7;
  --color-bg-secondary:#f2f2f2;
  --color-bg-tertiary:#ffffff;
  --color-bg-grouped:#f2f2f2;
  --color-bg-elevated:#ffffff;
  --color-bg-inset:#f2f2f2;

  --color-label-primary:#1d1d1f;
  /* Secondary is solid for WCAG AA (≥4.5:1 on #f5f5f7). Tertiary stays translucent for disabled/decorative only. */
  --color-label-secondary:#6e6e73;
  --color-label-tertiary:rgba(60,60,67,0.46);
  --color-label-quaternary:rgba(60,60,67,0.18);

  --color-fill-primary:rgba(120,120,128,0.16);
  --color-fill-secondary:rgba(120,120,128,0.12);
  --color-fill-tertiary:rgba(118,118,128,0.10);
  --color-fill-quaternary:rgba(116,116,128,0.06);
  /* Stronger than rest fills — hover must darken/intensify, never lighten. */
  --color-fill-hover:rgba(120,120,128,0.24);
  --color-control-ring-hover:color-mix(in srgb,var(--color-label-primary) 18%,transparent);

  --color-separator:rgba(60,60,67,0.22);
  --color-separator-opaque:#c6c6c8;

  /* Tint for text/links; tint-fill for solid CTAs (white-on-fill must stay #355cff) */
  --color-tint:#355cff;
  --color-tint-rgb:53,92,255;
  /* Hover darkens. White on #2a4ae0 is 6.66:1; pressed is #1e40af. */
  --color-tint-hover:#2a4ae0;
  --color-tint-pressed:#1e40af;
  --color-tint-fill:#355cff;
  --color-tint-fill-hover:#2a4ae0;
  --color-tint-fill-pressed:#1e40af;

  --color-destructive:#ff3b30;
  --color-destructive-rgb:255,59,48;
  --color-success:#34c759;
  --color-success-rgb:52,199,89;
  /* Label colours for text/pills on light surfaces (WCAG AA ≥4.5:1 on white) */
  --success-text:#15803d;
  --color-success-label:var(--success-text);
  --warning-text:#9a5700;
  --color-warning-label:var(--warning-text);
  --destructive-text:#c41218;
  --color-destructive-label:var(--destructive-text);
  --color-warning:#ff9500;
  --color-warning-rgb:255,149,0;
  --color-info:#355cff;

  --color-border-subtle:color-mix(in srgb,var(--color-label-primary) 8%,transparent);
  --color-border-field:color-mix(in srgb,var(--color-label-primary) 14%,transparent);
  --color-fill-ghost:color-mix(in srgb,var(--color-label-primary) 5%,transparent);
  --color-fill-site-pick:color-mix(in srgb,var(--color-label-primary) 4%,transparent);

  --color-glass-sidebar:color-mix(in srgb,var(--color-bg-elevated) 82%,transparent);
  --color-glass-pill:color-mix(in srgb,var(--color-bg-elevated) 82%,transparent);
  --color-glass-pill-scrolled:color-mix(in srgb,var(--color-bg-elevated) 92%,transparent);
  --color-glass-modal:color-mix(in srgb,var(--color-bg-elevated) 88%,transparent);
  --color-glass-border-warm:color-mix(in srgb,var(--color-bg-elevated) 75%,transparent);

  --glass-fill:color-mix(in srgb,var(--color-bg-elevated) 78%,transparent);
  --glass-blur:blur(48px) saturate(200%);
  --glass-border:var(--color-glass-border-warm);
  --glass-shadow:0 8px 40px color-mix(in srgb,var(--color-label-primary) 10%,transparent),0 2px 8px color-mix(in srgb,var(--color-label-primary) 6%,transparent);
  --glass-specular:inset 0 1px 0 color-mix(in srgb,var(--color-bg-elevated) 90%,transparent),inset 1px 0 0 color-mix(in srgb,var(--color-bg-elevated) 40%,transparent);

  --shadow-card:0 1px 3px color-mix(in srgb,var(--color-label-primary) 6%,transparent),0 4px 16px color-mix(in srgb,var(--color-label-primary) 4%,transparent),inset 0 1px 0 color-mix(in srgb,var(--color-bg-elevated) 90%,transparent);
  --shadow-card-hover:0 4px 20px color-mix(in srgb,var(--color-label-primary) 10%,transparent);
  --shadow-btn-dark:0 1px 3px color-mix(in srgb,var(--color-label-primary) 20%,transparent),0 4px 12px color-mix(in srgb,var(--color-label-primary) 12%,transparent);
  --shadow-btn-tint:var(--bd-shadow-brand);
  --shadow-modal:0 24px 64px color-mix(in srgb,var(--color-label-primary) 14%,transparent),0 4px 16px color-mix(in srgb,var(--color-label-primary) 8%,transparent);
  --shadow-pill:0 8px 40px color-mix(in srgb,var(--color-label-primary) 9%,transparent),0 2px 8px color-mix(in srgb,var(--color-label-primary) 5%,transparent);
  --shadow-pill-scrolled:0 12px 48px color-mix(in srgb,var(--color-label-primary) 12%,transparent),0 4px 12px color-mix(in srgb,var(--color-label-primary) 8%,transparent);
  --pill-specular-top:inset 0 1px 0 color-mix(in srgb,var(--color-bg-elevated) 95%,transparent);
  --pill-specular-bottom:inset 0 -1px 0 color-mix(in srgb,var(--color-label-primary) 4%,transparent);
  --shadow-input-inset:inset 0 1px 3px color-mix(in srgb,var(--color-label-primary) 6%,transparent);
  --shadow-input-highlight:0 1px 0 color-mix(in srgb,var(--color-bg-elevated) 80%,transparent);
  --shadow-focus-ring:0 0 0 3px color-mix(in srgb,var(--color-tint) 18%,transparent);
  --color-page-glow:var(--bd-gradient-soft),linear-gradient(180deg,color-mix(in srgb,var(--color-tint) 4%,var(--color-bg-primary)) 0%,var(--color-bg-grouped) 28%,var(--color-bg-grouped) 100%);
}

/* ---------- Dark (Browns Digital UI — only dark palette; see file header) ---------- */
:root[data-theme="dark"],
:root[data-bd-theme="dark"]{
  --color-bg-primary:#0a0a0a;
  --color-bg-secondary:#111111;
  --color-bg-tertiary:#1a1a1a;
  --color-bg-grouped:#0a0a0a;
  --color-bg-elevated:#0f0f0f;
  --color-bg-inset:#1a1a1a;

  --color-label-primary:#f5f5f5;
  --color-label-secondary:#a3a3a3;
  --color-label-tertiary:#737373;
  --color-label-quaternary:rgba(245,245,245,0.22);

  --color-fill-primary:rgba(120,120,128,0.36);
  --color-fill-secondary:rgba(120,120,128,0.32);
  --color-fill-tertiary:rgba(118,118,128,0.24);
  --color-fill-quaternary:rgba(116,116,128,0.18);
  --color-fill-hover:rgba(120,120,128,0.52);
  --color-control-ring-hover:color-mix(in srgb,#fff 26%,transparent);

  --color-separator:rgba(46,46,46,0.65);
  --color-separator-opaque:#2e2e2e;

  /* Text/links: lighter blue on dark. Fills stay #355cff for white-label AA. */
  --color-tint:#5b8cff;
  --color-tint-rgb:91,140,255;
  /* Text links darken from #5b8cff. Solid fills use the same hover/pressed pair as light. */
  --color-tint-hover:#355cff;
  --color-tint-pressed:#1e40af;
  --color-tint-fill:#355cff;
  --color-tint-fill-hover:#2a4ae0;
  --color-tint-fill-pressed:#1e40af;

  --color-destructive:#ef4444;
  --color-destructive-rgb:239,68,68;
  --color-success:#22c55e;
  --color-success-rgb:34,197,94;
  --success-text:#86efac;
  --color-success-label:var(--success-text);
  --warning-text:#fbbf24;
  --color-warning-label:var(--warning-text);
  --destructive-text:#fca5a5;
  --color-destructive-label:var(--destructive-text);
  --color-warning:#f59e0b;
  --color-warning-rgb:245,158,11;
  --color-info:#5b8cff;

  --bd-gradient-soft:none;
  --color-page-glow:linear-gradient(180deg,#0a0a0a 0%,var(--color-bg-grouped) 100%);
  --shadow-btn-tint:var(--bd-shadow-brand);

  --glass-fill:rgba(28,28,28,0.9);
  --glass-blur:blur(40px) saturate(180%);
  --glass-border:rgba(255,255,255,0.10);
  --glass-shadow:0 8px 32px rgba(0,0,0,0.45),0 2px 8px rgba(0,0,0,0.28);
  --glass-specular:inset 0 1px 0 rgba(255,255,255,0.10),inset 1px 0 0 rgba(255,255,255,0.05);
}

/* ---------- legacy bridge (existing components keep working) ---------- */
:root{
  --bg:var(--color-bg-primary);
  --bg-soft:var(--color-bg-secondary);
  --bg-alt:var(--color-bg-tertiary);
  --panel:var(--color-bg-elevated);
  --card:var(--color-bg-elevated);
  --field:var(--color-bg-primary);
  --ink:var(--color-label-primary);
  --muted:var(--color-label-secondary);
  --subtle:var(--color-label-tertiary);
  --line:var(--color-separator-opaque);
  --line-soft:var(--color-separator);
  --brand:var(--color-tint);
  --brand-mid:color-mix(in srgb,var(--color-tint) 72%,#ffffff);
  --brand-hover:var(--color-tint-fill-hover);
  --brand-light:color-mix(in srgb,var(--color-tint) 35%,#ffffff);
  --cta:var(--color-tint-fill);
  --good:var(--color-success);
  --warn:var(--color-warning);
  --bad:var(--color-destructive);
  --glass:var(--glass-fill);
  --font:var(--font-text);
  --mono:var(--font-mono);
  --ease:var(--motion-page);
  --ease-spring:var(--motion-spring);
  --sh-card:var(--glass-shadow);
  --sh-pop:0 8px 32px rgba(0,0,0,0.15),0 2px 8px rgba(0,0,0,0.08);
  --highlight-top:var(--glass-specular);
  --highlight-soft:linear-gradient(180deg,color-mix(in srgb,var(--color-bg-elevated) 96%,#fff) 0%,var(--color-bg-elevated) 100%);
  --mesh:var(--bd-gradient-soft);
}

/* ---------- accessibility: reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  :root{--motion-micro:0ms;--motion-page-dur:0ms;--motion-dismiss-dur:0ms;--motion-hover:0ms}
}

/* ---------- accessibility: high contrast ---------- */
@media (prefers-contrast:more){
  :root{
    --color-label-secondary:var(--color-label-primary);
    --color-label-tertiary:var(--color-label-secondary);
    --color-separator:var(--color-separator-opaque);
    --glass-fill:var(--color-bg-elevated);
    --glass-blur:none;
  }
}

/* ---------- Browns Digital UI utility ---------- */
.liquid-glass{
  position:relative;
  background:var(--glass-fill);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow),var(--glass-specular);
  border:1px solid var(--glass-border);
}
.liquid-glass::before{
  content:"";
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
.liquid-glass::after{
  content:"";
  position:absolute;top:0;left:16px;right:16px;height:1px;border-radius:999px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.45) 20%,rgba(255,255,255,0.55) 50%,rgba(255,255,255,0.45) 80%,transparent);
  opacity:0.7;
}

/* Theme switch transitions (enabled after first paint) */
html.bd-theme-ready:root{
  transition:background-color 300ms ease,color 300ms ease;
}
html.bd-theme-ready body,
html.bd-theme-ready .side,
html.bd-theme-ready .card,
html.bd-theme-ready .pill-notch{
  transition:background-color 300ms ease,color 300ms ease,border-color 300ms ease,box-shadow 300ms ease;
}
html.bd-theme-ready .btn{
  transition:background-color 300ms ease,color 300ms ease,border-color 300ms ease,box-shadow 300ms ease,transform 100ms var(--motion-spring,cubic-bezier(.34,1.56,.64,1));
}
html.bd-theme-ready .field input,
html.bd-theme-ready .field textarea,
html.bd-theme-ready .field select{
  transition:background-color 300ms ease,color 300ms ease,border-color 300ms ease,box-shadow 300ms ease;
}