/* DAT Drives UI tokens — v1. Light = creator workspace (default). Dark = player / client page: add data-theme="dark". */
@font-face{font-family:"Geist";src:url("fonts/Geist-Variable.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("fonts/GeistMono-Variable.woff2") format("woff2");font-weight:400 700;font-display:swap}

:root{
  /* ---- brand palette (raw, do not use directly in components) ---- */
  --mint-50:#E1F5EE;--mint-200:#9FE1CB;--mint-300:#5DCAA5;--mint-500:#1D9E75;--mint-700:#0F6E56;
  --ink-900:#1A1A1A;--ink-800:#2C2C2A;--ink-700:#444441;--ink-600:#5F5E5A;--ink-500:#888780;
  --stone-50:#F5F4F0;--stone-100:#ECEAE3;--stone-200:#E0DDD5;--stone-300:#D3D1C7;
  --white:#FFFFFF;
  /* dark workspace neutrals, derived from ink (warm, slightly lifted) */
  --night-950:#121211;--night-900:#181817;--night-850:#1F1F1D;--night-800:#272725;--night-700:#33332F;--night-600:#45453F;

  /* ---- semantic: light ---- */
  --bg:var(--stone-50);
  --surface:var(--white);
  --surface-2:var(--stone-100);         /* table header, inset areas */
  --surface-hover:#FAF9F6;
  --surface-sunken:var(--stone-100);
  --border:var(--stone-200);
  --border-strong:var(--stone-300);
  --text:var(--ink-900);
  --text-2:var(--ink-700);             /* body secondary */
  --text-3:var(--ink-600);             /* meta, labels (AA on white & stone-50) */
  --text-disabled:var(--ink-500);      /* non-essential only (fails AA for small text) */
  --text-on-accent:var(--white);
  --accent:var(--mint-700);            /* buttons, links on light: 6.2:1 with white */
  --accent-hover:#0B5A46;
  --accent-brand:var(--mint-500);      /* decorative: progress bars, focus ring, logo, dots */
  --accent-soft:var(--mint-50);
  --accent-soft-text:var(--mint-700);
  --success:#0F6E56; --success-soft:#E1F5EE;
  --warn:#8A5A00;    --warn-soft:#FBF0D9;
  --danger:#B42318;  --danger-soft:#FCE8E6;
  --info:var(--ink-700); --info-soft:var(--stone-100);
  --focus-ring:0 0 0 3px rgba(29,158,117,.35);
  --overlay:rgba(26,26,26,.48);

  /* ---- type ---- */
  --font-sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fw-regular:400;--fw-medium:500;--fw-bold:700;
  --fs-xs:12px;   --lh-xs:16px;   /* meta, badges */
  --fs-sm:13px;   --lh-sm:20px;   /* table cells, labels */
  --fs-md:15px;   --lh-md:24px;   /* body */
  --fs-lg:18px;   --lh-lg:28px;   /* card title */
  --fs-xl:24px;   --lh-xl:32px;   /* page title */
  --fs-2xl:32px;  --lh-2xl:40px;  /* hero amount */
  --fs-3xl:44px;  --lh-3xl:52px;  /* marketing only */
  --ls-tight:-0.015em; --ls-caps:0.06em;
  /* mono usage: timecode, file size, duration, resolution, amounts */
  --mono-features:"tnum" 1,"zero" 1;

  /* ---- spacing (4/8) ---- */
  --space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;
  --space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;

  /* ---- radii ---- */
  --radius-xs:4px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-full:999px;

  /* ---- shadows (light) ---- */
  --shadow-xs:0 1px 2px rgba(26,26,26,.05);
  --shadow-sm:0 1px 3px rgba(26,26,26,.06),0 1px 2px rgba(26,26,26,.04);
  --shadow-md:0 4px 12px rgba(26,26,26,.07),0 1px 3px rgba(26,26,26,.05);
  --shadow-lg:0 16px 40px rgba(26,26,26,.12),0 2px 6px rgba(26,26,26,.06);

  /* ---- layout ---- */
  --container-max:1200px;   /* dashboard content */
  --container-narrow:720px; /* forms, upload */
  --player-max:1120px;      /* client page player */
  --sidebar-w:240px;
  --topbar-h:56px;
  --control-h-sm:32px;--control-h:40px;--control-h-lg:48px;
  --gutter-desktop:32px;--gutter-tablet:24px;--gutter-mobile:16px;
  --gutter:var(--gutter-desktop);
  /* breakpoints (reference; CSS vars can't be used in @media):
     desktop >=1280px · tablet 768–1279px · mobile <768px */
  --bp-tablet:768px;--bp-desktop:1280px;

  /* ---- motion ---- */
  --ease:cubic-bezier(.2,0,0,1);--dur-fast:120ms;--dur:200ms;

  color-scheme:light;
}

[data-theme="dark"]{
  --bg:var(--night-950);
  --surface:var(--night-900);
  --surface-2:var(--night-850);
  --surface-hover:var(--night-800);
  --surface-sunken:#0C0C0B;
  --border:var(--night-700);
  --border-strong:var(--night-600);
  --text:#F5F4F0;
  --text-2:#D3D1C7;
  --text-3:#A8A79F;
  --text-disabled:#6E6D67;
  --text-on-accent:var(--ink-900);
  --accent:var(--mint-300);            /* 8.9:1 with ink text */
  --accent-hover:var(--mint-200);
  --accent-brand:var(--mint-500);
  --accent-soft:rgba(93,202,165,.12);
  --accent-soft-text:var(--mint-200);
  --success:var(--mint-300); --success-soft:rgba(93,202,165,.12);
  --warn:#F2B54A;    --warn-soft:rgba(242,181,74,.12);
  --danger:#F28B82;  --danger-soft:rgba(242,139,130,.12);
  --info:#D3D1C7; --info-soft:var(--night-800);
  --focus-ring:0 0 0 3px rgba(93,202,165,.45);
  --overlay:rgba(0,0,0,.6);
  --shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:0 1px 3px rgba(0,0,0,.5);
  --shadow-md:0 6px 16px rgba(0,0,0,.45);
  --shadow-lg:0 20px 48px rgba(0,0,0,.55);
  color-scheme:dark;
}

@media (max-width:1279px){:root{--gutter:var(--gutter-tablet)}}
@media (max-width:767px){:root{--gutter:var(--gutter-mobile);--fs-xl:20px;--lh-xl:28px;--fs-2xl:28px;--lh-2xl:36px}}

/* ---- base + tiny primitives (shared by mockups) ---- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:var(--fs-md);line-height:var(--lh-md);-webkit-font-smoothing:antialiased}
.mono{font-family:var(--font-mono);font-feature-settings:var(--mono-features)}
.t-title{font-size:var(--fs-xl);line-height:var(--lh-xl);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);margin:0}
.t-h2{font-size:var(--fs-lg);line-height:var(--lh-lg);font-weight:var(--fw-medium);margin:0}
.t-meta{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--text-3)}
.t-label{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--text-3);text-transform:uppercase;letter-spacing:var(--ls-caps);font-weight:var(--fw-medium)}
.icon{width:20px;height:20px;flex:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:var(--control-h);padding:0 var(--space-4);border-radius:var(--radius-md);border:1px solid transparent;font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-medium);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background var(--dur-fast) var(--ease)}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.btn-primary{background:var(--accent);color:var(--text-on-accent)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.btn-ghost{background:transparent;color:var(--text-2)}
.btn-lg{height:var(--control-h-lg);padding:0 var(--space-6);font-size:var(--fs-md)}
.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 var(--space-2);border-radius:var(--radius-full);font-size:var(--fs-xs);font-weight:var(--fw-medium);white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-success{background:var(--success-soft);color:var(--success)}
.badge-warn{background:var(--warn-soft);color:var(--warn)}
.badge-danger{background:var(--danger-soft);color:var(--danger)}
.badge-neutral{background:var(--info-soft);color:var(--info)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg)}
.progress{height:6px;border-radius:var(--radius-full);background:var(--surface-2);overflow:hidden}
.progress>span{display:block;height:100%;background:var(--accent-brand);border-radius:inherit}