/* ============================================================================
   POCKET — DESIGN TOKENS  (the single source of visual truth for the website)
   Loaded first, then observatory.css (the page grammar), then site-shell.css.

   Direction C, "The Open Instrument": graphite ink on cool film greys. The colour
   values are DESIGN.md's frontmatter and match the app's ui_theme._TOKENS exactly,
   so the website and the product wear one system. Change them in DESIGN.md first.

     · Signal (orange) marks the working only. Never a figure, a button, a link,
       a warning, active navigation, a focus ring or a chart.
     · Green and red mean gain and loss, always with a sign. Nothing else.
     · No shadows at rest; --lift is for the dialog alone. No glass, blur, grain,
       gradient or glow.
   ============================================================================ */

/* ---------- type: served from this site, never from a third party ----------
   Inter 5.3, Plus Jakarta Sans and JetBrains Mono, all OFL-1.1 (licences in fonts/).
   latin-ext carries the rupee sign (U+20B9), so every ₹ is set in Inter.          */
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;
  src:url(fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations'),
      url(fonts/inter-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;
  src:url(fonts/inter-latin-wght-normal.woff2) format('woff2-variations'),
      url(fonts/inter-latin-wght-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-display:swap;font-weight:200 800;
  src:url(fonts/plusjakartasans-var.woff2) format('woff2-variations'),
      url(fonts/plusjakartasans-var.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:400;
  src:url(fonts/jetbrainsmono-regular.woff2) format('woff2')}

:root{color-scheme:light;
  /* ---------- the film: grounds and surfaces ---------- */
  --paper:#F2F4F6;  --plate:#E7EBEF;  --card:#FCFDFD;  --raised:#DCE2E8;
  --rule:rgba(19,26,34,.11);  --rule-2:rgba(19,26,34,.22);  --edge:#6D7985;

  /* ---------- ink: text and the one action colour ---------- */
  --ink:#131A22;  --ink-hover:#26303B;  --ink-2:#3B4754;  --ink-3:#56626F;  --on-ink:#FCFDFD;

  /* ---------- meaning: provenance, gain, loss ---------- */
  --signal:#B03E00;  --signal-wash:rgba(176,62,0,.07);  --gain:#12704A;  --loss:#B0213A;

  /* ---------- categorical series, fixed order (validated for CVD) ---------- */
  --c1:#427FD8; --c2:#6E3692; --c3:#0791A0; --c4:#5C52B4;
  --c5:#A47807; --c6:#006C93; --c7:#767700; --c8:#953A83;

  --lift:0 1px 2px rgba(19,26,34,.06),0 10px 28px -14px rgba(19,26,34,.22);
  --scrim:rgba(15,20,25,.40);

  /* ---------- families ---------- */
  --display:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  --sans:'Inter',system-ui,'Segoe UI',Arial,sans-serif;
  --mono:'JetBrains Mono','Inter',ui-monospace,monospace;

  /* ---------- website type scale (DESIGN.md "Website scale"; 12px is the floor) ---------- */
  --fs-display:clamp(40px, 31.8px + 2.1vw, 62px);     /* 700 / 1.03 / -.035em, one per page */
  --fs-headline:clamp(30px, 25.5px + 1.143vw, 42px);  /* 700 / 1.08 / -.03em                */
  --fs-h3:20px;  --fs-lede:18px;  --fs-body:16px;  --fs-small:14px;  --fs-caption:13px;  --fs-prov:12px;
  /* figures: the app's figure sizes (DESIGN.md "App scale"), for the plate and its working */
  --fs-anchor:44px;  --fs-fig-l:36px;  --fs-fig:28px;  --fs-fig-m:24px;  --fs-fig-s:18px;

  /* ---------- radius: chips, controls, cards, sheet top ---------- */
  --r-1:4px;  --r-2:8px;  --r-3:12px;  --r-4:16px;

  /* ---------- motion ---------- */
  --t-fast:120ms;  --t-ui:200ms;  --t-panel:240ms;  --t-roll:320ms;  --t-trace:480ms;
  --ease-ui:cubic-bezier(.2,.8,.2,1);  --ease-exit:cubic-bezier(.23,1,.32,1);  --ease-trace:cubic-bezier(.65,0,.35,1);

  /* ---------- layout ---------- */
  --maxw:1200px;  --gutter:28px;  --sec:96px;

  /* ---------- z-index: a scale, never 9999 ---------- */
  --z-sticky:50;  --z-overlay:100;  --z-modal:200;  --z-toast:300;
}
/* ---------- dark: the same roles, each stepped for its own surfaces (DESIGN.md "Colors").
   Not an inversion. The site follows the visitor's system setting; light is the default when
   there is none. Values equal ui_theme._TOKENS [data-theme=dark], so the site and the app match. */
@media (prefers-color-scheme: dark){
  :root{color-scheme:dark;
    --paper:#0F1419;  --plate:#151B22;  --card:#1B222A;  --raised:#252D37;
    --rule:rgba(230,234,238,.10);  --rule-2:rgba(230,234,238,.20);  --edge:#7A8693;
    --ink:#E6EAEE;  --ink-hover:#C9D1D9;  --ink-2:#B3BCC6;  --ink-3:#8F9AA6;  --on-ink:#0F1419;
    --signal:#E9803F;  --signal-wash:rgba(233,128,63,.10);  --gain:#3FBF86;  --loss:#F2808F;
    --c1:#5C95EA; --c2:#8A57AE; --c3:#09A8BA; --c4:#756FCD;
    --c5:#AF8008; --c6:#0288B8; --c7:#767700; --c8:#AF599D;
    --lift:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.6);
    --scrim:rgba(0,0,0,.55);
  }
}
@media (max-width:900px){ :root{ --sec:72px; } }
@media (max-width:560px){ :root{ --gutter:16px; --sec:56px; --fs-lede:16px; } }

/* ============================ global details ============================ */

/* money and data: tabular figures so columns of numbers align */
.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* focus: a 2px ink outline at 3px offset, never removed */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--ink); outline-offset:3px; border-radius:var(--r-1); }

::selection{ background:var(--rule-2); color:var(--ink); }

@supports selector(::-webkit-scrollbar){
  ::-webkit-scrollbar{ width:11px; height:11px; }
  ::-webkit-scrollbar-track{ background:var(--paper); }
  ::-webkit-scrollbar-thumb{ background:var(--rule-2); border-radius:var(--r-2); border:3px solid var(--paper); }
  ::-webkit-scrollbar-thumb:hover{ background:var(--edge); }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto !important; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}