/* =====================================================================
   Browns Digital Studio — Apple HIG design tokens (Liquid Glass / iOS 26)
   Pure presentation layer. All component colours reference these tokens.
===================================================================== */

/* ---------- 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) ---------- */
  --font-display:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-text:"SF Pro Text",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --font-editorial:"New York",Georgia,"Times New Roman",serif;

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

/* ---------- Light (default — zero-dependency :root) ---------- */
:root,
:root[data-hig-theme="default-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;
  --color-label-secondary:rgba(60,60,67,0.55);
  --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);

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

  --color-tint:#0071e3;
  --color-tint-rgb:0,113,227;
  --color-tint-hover:#0077ed;
  --color-tint-pressed:#0062cc;

  --color-destructive:#ff3b30;
  --color-destructive-rgb:255,59,48;
  --color-success:#34c759;
  --color-success-rgb:52,199,89;
  --color-warning:#ff9500;
  --color-warning-rgb:255,149,0;
  --color-info:#0071e3;

  --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:0 2px 8px color-mix(in srgb,var(--color-tint) 30%,transparent);
  --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) 15%,transparent);
  --color-page-glow:linear-gradient(180deg,color-mix(in srgb,var(--color-tint) 5%,var(--color-bg-primary)) 0%,var(--color-bg-grouped) 22%,var(--color-bg-grouped) 100%);
}

/* ---------- Dark (only when explicitly set) ---------- */
:root[data-theme="dark"],
:root[data-hig-theme="default-dark"]{
  --color-bg-primary:#000000;
  --color-bg-secondary:#1c1c1e;
  --color-bg-tertiary:#2c2c2e;
  --color-bg-grouped:#000000;
  --color-bg-elevated:#1c1c1e;

  --color-label-primary:#ffffff;
  --color-label-secondary:rgba(235,235,245,0.6);
  --color-label-tertiary:rgba(235,235,245,0.44);
  --color-label-quaternary:rgba(235,235,245,0.18);

  --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-separator:rgba(84,84,88,0.65);
  --color-separator-opaque:#38383a;

  --color-tint:#0a84ff;
  --color-tint-rgb:10,132,255;
  --color-tint-hover:#3d9dff;
  --color-tint-pressed:#006ee6;

  --color-destructive:#ff453a;
  --color-success:#30d158;
  --color-warning:#ff9f0a;
  --color-info:#0a84ff;

  --glass-fill:rgba(255,255,255,0.12);
  --glass-blur:blur(40px) saturate(180%);
  --glass-border:rgba(255,255,255,0.14);
  --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.12),inset 1px 0 0 rgba(255,255,255,0.06);
}

/* ---------- Browns Digital Brand Light ---------- */
:root[data-hig-theme="bd-brand-light"]{
  --color-bg-primary:#fafafa;
  --color-bg-secondary:#f0f0f0;
  --color-bg-tertiary:#ffffff;
  --color-bg-grouped:#f0f0f0;
  --color-bg-elevated:#ffffff;
  --color-tint:#111111;
  --color-tint-rgb:17,17,17;
  --color-tint-hover:#2a2a2a;
  --color-tint-pressed:#000000;
  --glass-fill:rgba(255,255,255,0.78);
}

/* ---------- Browns Digital Brand Dark ---------- */
:root[data-hig-theme="bd-brand-dark"]{
  --color-bg-primary:#060606;
  --color-bg-secondary:#111111;
  --color-bg-tertiary:#1a1a1a;
  --color-bg-grouped:#060606;
  --color-bg-elevated:#141414;
  --color-label-primary:#ffffff;
  --color-label-secondary:rgba(255,255,255,0.55);
  --color-tint:#ffffff;
  --color-tint-rgb:255,255,255;
  --color-tint-hover:#e8e8e8;
  --color-tint-pressed:#d4d4d4;
  --glass-fill:rgba(255,255,255,0.08);
}

/* ---------- 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-pressed);
  --brand-light:color-mix(in srgb,var(--color-tint) 35%,#ffffff);
  --cta:var(--color-tint);
  --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);
  --r-pill:9999px;
  --r-card:16px;
  --r-input:10px;
  --r-control:10px;
  --r-shell:20px;
  --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:linear-gradient(145deg,color-mix(in srgb,var(--color-tint) 7%,var(--color-bg-elevated)) 0%,var(--color-bg-elevated) 52%,color-mix(in srgb,var(--color-tint) 4%,var(--color-bg-secondary)) 100%);
}

/* ---------- 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;
  }
}

/* ---------- Liquid Glass 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.hig-theme-ready:root{
  transition:background-color 300ms ease,color 300ms ease;
}
html.hig-theme-ready body,
html.hig-theme-ready .side,
html.hig-theme-ready .card,
html.hig-theme-ready .pill-notch,
html.hig-theme-ready .btn,
html.hig-theme-ready .field input,
html.hig-theme-ready .field textarea,
html.hig-theme-ready .field select{
  transition:background-color 300ms ease,color 300ms ease,border-color 300ms ease,box-shadow 300ms ease;
}