/*
 * Optor design tokens.
 *
 * Source of truth: the approved workspace prototype (prototype/index.html). Where the
 * landing page (prototype/landing.html) differs, the workspace value wins. Spacing and
 * radius scales did not exist in the prototype; they are derived from its literal values
 * (each literal maps to the nearest step).
 *
 * Breakpoints (custom properties cannot be used inside @media):
 *   --bp-mobile  900px  — graphite sidebar becomes a drawer, bottom navigation appears
 *   --bp-compact 1150px — narrower sidebar and content padding
 */

/* -- Fonts ------------------------------------------------------------------- */

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-400.48dba64ce91d.woff2") format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-500.1ddd7667c3b2.woff2") format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-600.5919a165635e.woff2") format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/inter-700.fc8a410c3795.woff2") format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/inter-800.f3d5e9452b85.woff2") format('woff2')}

:root{
  /* -- Color: surfaces and ink ---------------------------------------------- */
  --color-ink:#17191c;            /* text, primary buttons, active chips */
  --color-ink-hover:#35383e;
  --color-text:#17191c;
  --color-text-strong:#111;
  --color-text-muted:#68717d;     /* prototype's typography override of --muted */
  --color-text-subtle:#8b8e94;    /* captions, meta, crumbs */
  --color-placeholder:#858d99;
  --color-bg:#fff;
  --color-surface:#fff;
  --color-surface-muted:#f7f8fa;  /* prototype --bg: artwork, subtle panels */
  --color-surface-hover:#f1f2f4;
  --color-surface-active:#e9eaec;
  --color-chip:#f0f1f3;           /* badges, neutral chips */
  --color-line:#e9eaed;           /* dividers, card borders */
  --color-line-strong:#dfe1e5;    /* form controls */
  --color-line-hover:#c9ccd0;
  --color-focus:#343840;
  --color-overlay:#11111188;

  /* -- Color: graphite navigation --------------------------------------------- */
  --nav-bg:#191b1e;
  --nav-border:#24272b;
  --nav-text:#a8adb6;
  --nav-text-active:#fff;
  --nav-hover:#272a2f;
  --nav-active:#34373c;
  --nav-count:#50545c;
  --nav-divider:#34373c;
  --nav-group:#8d97a7;
  --nav-muted:#959ca7;
  --nav-avatar:#393d43;
  --nav-control:#282c32;
  --nav-control-border:#3b4049;

  /* -- Color: status tones ---------------------------------------------------- */
  /* The prototype is monochrome; only the warm warning banner and the muted red form
     error carry hue. Status tones reuse exactly those two and otherwise stay graphite. */
  --tone-neutral-bg:#f0f1f3;   --tone-neutral-text:#3a3e45;
  --tone-progress-bg:#fff;     --tone-progress-text:#17191c;  --tone-progress-line:#d5d8dd;
  --tone-positive-bg:#17191c;  --tone-positive-text:#fff;
  --tone-attention-bg:#f3eee6; --tone-attention-text:#726044; --tone-attention-line:#e7dece;
  --tone-negative-bg:#f6ecea;  --tone-negative-text:#70423c;  --tone-negative-line:#ead8d4;
  --tone-muted-bg:#f7f8fa;     --tone-muted-text:#8b8e94;

  /* -- Typography ------------------------------------------------------------- */
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --text-2xs:10px;     /* mobile bottom navigation labels */
  --text-xs:12px;
  --text-sm:13px;
  --text-control:14px;
  --text-base:15px;
  --text-card:15px;
  --heading-md:17px;
  --heading-lg:23px;
  --heading-xl:30px;
  --price-size:22px;
  --line-tight:1.2;
  --line-snug:1.4;
  --line-control:1.45;
  --line-body:1.6;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --tracking-heading-xl:-1px;
  --tracking-heading-lg:-.6px;
  --tracking-price:-.65px;
  --tracking-eyebrow:1.35px;

  /* -- Spacing (4px base; literals 5/7/9/13… round to the nearest step) -------- */
  --space-0-5:2px;
  --space-1:4px;
  --space-1-5:6px;
  --space-2:8px;
  --space-2-5:10px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:28px;
  --space-9:36px;
  --space-12:48px;
  --space-18:72px;

  /* -- Radius ------------------------------------------------------------------- */
  --radius-xs:5px;     /* nav counters, tiny tags */
  --radius-sm:6px;     /* badges */
  --radius-md:9px;     /* buttons, inputs, nav items */
  --radius-lg:13px;    /* cards, panels */
  --radius-xl:17px;    /* modal */
  --radius-pill:999px;

  /* -- Elevation ---------------------------------------------------------------- */
  --shadow-card-hover:0 7px 25px #17203008;
  --shadow-popover:0 5px 30px #00000022;
  --shadow-modal:0 30px 100px #00000022;
  --shadow-drawer:12px 0 50px #00000022;
  --shadow-bottom-nav:0 -4px 22px #15191f06;

  /* -- Layout ------------------------------------------------------------------- */
  --sidebar-width:218px;
  --topbar-height:77px;
  --content-max:1700px;
  --content-pad-x:38px;
  --content-pad-y:35px;
  --mobile-nav-height:66px;
  --touch-target:44px;

  /* -- Layers ------------------------------------------------------------------- */
  --z-sidebar:20;
  --z-bottom-nav:40;
  --z-overlay:60;
  --z-drawer-backdrop:65;
  --z-drawer:70;
  --z-toast:80;

  /* -- Motion ------------------------------------------------------------------- */
  --duration-fast:.18s;
  --duration-drawer:.24s;
}

@media (max-width:1150px){
  :root{--sidebar-width:185px;--content-pad-x:24px;--content-pad-y:28px}
}

@media (max-width:900px){
  :root{
    --heading-xl:26px;
    --heading-lg:22px;
    --heading-md:16px;
    --text-card:14px;
    --price-size:21px;
    --topbar-height:70px;
    --content-pad-x:16px;
    --content-pad-y:25px;
  }
}

@media (prefers-reduced-motion:reduce){
  :root{--duration-fast:0s;--duration-drawer:0s}
}