/*
 * Optor design tokens.
 *
 * Executable source of truth for the current shared web design values. Brand decisions,
 * approved references and the update workflow live in docs/brandbook.md; landing.css and
 * landing-components.css carry the approved landing-specific overrides.
 * Historical origin: the workspace prototype, now kept in the prototype-archive Git tag.
 * Spacing and radius scales were derived from that prototype's literal values.
 *
 * 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 ------------------------------------------------------------------- */

/* Normal-style Geologica, variable weights 400–700: static/fonts/README.md. */
@font-face{font-family:'Geologica';font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/geologica-var.08a48a7d6dbb.woff2") format('woff2')}
/* Arial adjusted to representative Latin/Cyrillic widths and Geologica's line metrics. */
@font-face{font-family:'Geologica Fallback';src:local('Arial');size-adjust:107.249%;ascent-override:90.91%;descent-override:25.641%;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: literals moved out of the stylesheets 1:1 (docs/css-plan.md item 2) -- */
  /* Exact original values; near-duplicates are listed in docs/decisions/ for the owner. */
  --color-on-dark:#fff;  /* text and lines on dark surfaces */
  --color-on-dark-muted:#c9ccd0;  /* secondary text on dark surfaces */
  --color-on-dark-hover:#ffffff1a;  /* hover fill on dark surfaces */
  --nav-text-strong:#f5f6f7;
  --nav-border-strong:#3a3f46;
  --nav-text-soft:#c7ccd3;
  --nav-text-faint:#787f8a;
  --nav-text-bright:#e8eaee;
  --nav-line-on-dark:rgba(255,255,255,.25);
  --color-avatar-bg:#eceef1;
  --color-image-placeholder:#e9ebee;  /* image / hero placeholder fill */
  --color-chip-dark-bg:#2b2e33;
  --color-chip-dark-text:#dce0e6;
  --color-scrim:#0a0d1480;  /* backdrop behind the drawer */
  --color-glass-strong:#fffffffa;  /* bottom navigation */
  --color-glass:#fffffff2;  /* popover / sticky bars */
  --color-glass-soft:#ffffffe8;  /* landing header */
  --color-glass-landing:#fffffff5;  /* landing floating panel */
  --color-line-glass:#e3e5e8;  /* top border of the bottom navigation */
  --color-text-bottom-nav:#777d86;
  --color-line-input-hover:#bfc3c9;
  --color-line-dashed:#dfe3e9;  /* dashed empty-state border */
  --color-text-empty:#768494;  /* empty-state text */
  --color-text-faint:#a2abb8;
  --color-text-slate:#333c48;
  --color-toast:#1b1e23;  /* toast background; dark text on the toast button */
  --color-toast-action-hover:#e6e7e9;
  --mask-opaque:#000;  /* mask-image stops: only alpha matters */
  --shadow-ink-12:#15191f1f;  /* popover shadow colour */
  --shadow-ink-05:#1720300d;
  --shadow-ink-03:#17191c08;
  --shadow-ink-08:#17191c14;  /* landing shadow colour */
  --shadow-ink-alpha-08:rgba(23,25,28,.08);  /* near-duplicate of --shadow-ink-08, see docs/decisions */
  --landing-text-mid:#515257;
  --landing-ink-soft:#444;
  --landing-dark:#1c1d1f;
  --landing-darker:#111214;
  --landing-on-dark-muted:#c2c3c6;
  --landing-line-dark:#2c2f34;
  --landing-text-faint:#7d828b;
  --landing-scrim-10:rgba(17,18,20,.1);
  --landing-scrim-15:rgba(17,18,20,.15);
  --landing-scrim-75:rgba(17,18,20,.75);
  --landing-scrim-85:rgba(17,18,20,.85);
  --public-text-faint:#b5b6ba;
  --public-skeleton:#eaeaec;

  /* -- Color: status tones ---------------------------------------------------- */
  /* Actions, navigation and text stay graphite; hue belongs to states only (owner's
     choice 2026-11-04, docs/brandbook.md 4): blue — in progress, green — done well,
     amber — needs attention, red — failed. Pale tint + dark text of the same hue, AA.
     No tone is a solid ink fill: that shape belongs to the primary button. Statuses
     differ by shape too (status_badge): check, dot, ring, plain text. */
  --tone-neutral-bg:#f0f1f3;   --tone-neutral-text:#3a3e45;
  --tone-progress-bg:#ebf1fd;  --tone-progress-text:#1f4fa8;  --tone-progress-line:#c9d8f6;
  --tone-positive-bg:#e7f4ec;  --tone-positive-text:#17633d;  --tone-positive-line:#bfe0cc;
  --tone-attention-bg:#fbf1df; --tone-attention-text:#7a4b06; --tone-attention-line:#f0dcb4;
  --tone-negative-bg:#fbeceb;  --tone-negative-text:#9b2f27;  --tone-negative-line:#f1cfcb;
  --tone-muted-bg:#f7f8fa;     --tone-muted-text:#6d7074;

  /* -- Typography ------------------------------------------------------------- */
  --font-sans:'Geologica','Geologica 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:-.015em;
  --tracking-heading-lg:-.015em;
  --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 ------------------------------------------------------------------- */
  /* Local stacking inside one component (sticky columns, hero art over a background). */
  --z-below:-1;
  --z-base:0;
  --z-raised:1;
  --z-raised-2:2;
  --z-raised-3:3;
  /* Sticky bars and dropdown panels inside the page. */
  --z-sticky:5;           /* sticky save bar */
  --z-sticky-bar:10;      /* sticky filter / tab bar under the topbar */
  --z-dropdown:20;        /* dropdown panels (same layer as the sidebar, as before) */
  /* Page chrome and overlays, in stacking order. */
  --z-sidebar:20;
  --z-topbar:30;
  --z-bottom-nav:40;
  --z-cookie:50;
  --z-overlay:60;
  --z-drawer-backdrop:65;
  --z-drawer:70;
  --z-toast:80;

  /* -- Motion ------------------------------------------------------------------- */
  --duration-fast:.18s;
  --duration-press:.1s;          /* buttons sink a little while pressed */
  --duration-drawer:.24s;
  --ease-out:cubic-bezier(.2,.7,.2,1);
}

@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-press:0s;--duration-drawer:0s}
}