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

/* One variable file for every weight in use (400–700), text optical size: static/fonts/README.md. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/inter-var.7db94aaf7500.woff2") format('woff2')}
/* Arial stretched to Inter's width and line box: text keeps its place when Inter swaps in. */
@font-face{font-family:'Inter Fallback';src:local('Arial');size-adjust:107.4%;ascent-override:90.2%;descent-override:22.48%;line-gap-override:0%}

:root{
  color-scheme:light;            /* light only: no forced dark inversion, light form controls */

  /* -- 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 */
  /* Every text grey keeps at least 4.5:1 (WCAG AA) on --color-bg and --color-surface-muted. */
  --color-text-subtle:#6d7074;    /* captions, meta, crumbs */
  --color-placeholder:#6a707a;
  --color-text-label:#6c7179;      /* form field labels */
  --color-text-table-head:#667281; /* data table column headers */
  --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;
  --nav-focus:#fff;               /* --color-focus inside the sidebar: graphite on graphite is invisible */

  /* -- 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.
     No tone is a solid ink fill: that shape belongs to the primary button. Statuses
     differ by shape too (status_badge): outline + check, dot, fill, plain text. */
  --tone-neutral-bg:#f0f1f3;   --tone-neutral-text:#3a3e45;
  --tone-progress-bg:#fff;     --tone-progress-text:#17191c;  --tone-progress-line:#d5d8dd;
  --tone-positive-bg:#fff;     --tone-positive-text:#17191c;  --tone-positive-line:#8b9097;
  --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:#6d7074;

  /* -- Typography ------------------------------------------------------------- */
  --font-sans:'Inter','Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  /* Sizes in rem follow the reader's browser font size; tracking in em follows the size. */
  --text-2xs:.625rem;     /* 10px, mobile bottom navigation labels */
  --text-xs:.75rem;       /* 12px */
  --text-sm:.8125rem;     /* 13px */
  --text-control:.875rem; /* 14px */
  --text-base:.9375rem;   /* 15px */
  --text-card:.9375rem;   /* 15px */
  --heading-md:1.0625rem; /* 17px */
  --heading-lg:1.4375rem; /* 23px */
  --heading-xl:1.875rem;  /* 30px */
  --price-size:1.375rem;  /* 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:-.033em;
  --tracking-heading-lg:-.026em;
  --tracking-price:-.03em;
  --tracking-eyebrow:.11em;

  /* -- 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-topbar:30;
  --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:1.625rem;  /* 26px */
    --heading-lg:1.375rem;  /* 22px */
    --heading-md:1rem;      /* 16px */
    --text-card:.875rem;    /* 14px */
    --price-size:1.3125rem; /* 21px */
    --topbar-height:70px;
    --content-pad-x:16px;
    --content-pad-y:25px;
  }
}

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