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