/* ============================================================================
   ps-ui-core.css — PS Web UI foundation core (L0)
   PS_UI_VERSION: 0.2.0 (2026-09-25)

   The single authoritative home for Planetary Scale web-tool tokens and base
   styles (operating-principles §11). Every PS web surface loads this file, no
   exceptions. Apps vendor a COPY of ps-ui-*.css + fonts/ into their own static
   dir (like the Preact vendor files); scripts/check-ui-freshness.py reports
   which apps are running a stale copy. Edit ONLY the canonical copy at
   brand/design-system/web/, bump PS_UI_VERSION, then re-vendor.

   Load order: ps-ui-core.css → ps-ui.css → any L2 layer(s).
   Decisions record: brand/design-system/web/decisions.md
   ========================================================================== */

/* ---- Brand fonts (decision 3: self-hosted; no Google Fonts requests) ----
   Assistant = variable font, one file per script subset covers weights 200–800.
   Martel = static 400 + 700 (the only weights the estate uses). */
@font-face{font-family:"Assistant";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("fonts/assistant-latin.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:"Assistant";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("fonts/assistant-latin-ext.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:"Assistant";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("fonts/assistant-hebrew.woff2") format("woff2");
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Martel";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/martel-regular.woff2") format("woff2")}
@font-face{font-family:"Martel";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/martel-bold.woff2") format("woff2")}

/* ---- Tokens — light (decision 1 canonical values) ---- */
:root{
  color-scheme:light;

  /* surfaces */
  --bg:#F7F7F8;            /* brand Seasalt — page ground */
  --surface:#FFFFFF;       /* cards */
  --surface2:#FDFDFC;      /* chrome bars, table heads, inset fills */
  --line:#E7E6E2;          /* hairline borders */
  --line2:#DAD9D3;         /* stronger borders, form controls */

  /* text */
  --tx:#272925;            /* brand Jet — primary */
  --tx2:#585A56;           /* secondary */
  --tx3:#9D9D97;           /* tertiary / placeholders */

  /* accent (brand greens) */
  --accent:#00957F;        /* Persian Green — THE accent */
  --accent-deep:#106254;   /* Castleton — hover / emphasis */
  --wash:#ACDDCD;          /* Tiffany — strong wash: chips, marks */
  --wash-soft:#DDF0E9;     /* soft wash: fills, hovers, row tints */
  --washtx:#0C4D43;        /* text on wash */

  /* semantic */
  --ok:#00957F;      --okbg:#E2F1EC;
  --amber:#B98F1F;   --amberbg:#FAF3DF;
  --err:#B0472F;     --errbg:#FBEFEA;   --on-err:#FFFFFF;
  --info:#3E6FA8;    --infobg:#E9F0F8;
  --gold:#E2C064;          /* decorative only — never text, never status */

  /* elevation + scrim */
  --shadow1:0 1px 2px rgba(35,38,31,.05);
  --shadow2:0 1px 2px rgba(35,38,31,.05),0 6px 18px rgba(35,38,31,.07);
  --scrim:rgba(20,22,19,.45);

  /* shape scale */
  --r-card:14px; --r-btn:9px; --r-chip:20px; --r-ctl:8px;

  /* type */
  --serif:"Martel",Georgia,serif;
  --sans:"Assistant","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
}

/* ---- Tokens — dark (decision 2: mandatory; the console's proven family) ---- */
@media (prefers-color-scheme:dark){:root{
  color-scheme:dark;
  --bg:#1C1F1B; --surface:#252A24; --surface2:#232823;
  --line:#333A31; --line2:#414A3E;
  --tx:#EEF0EC; --tx2:#AEB3AA; --tx3:#7B8177;
  --accent:#3CB39A; --accent-deep:#8FD8C3;
  --wash:#123F36; --wash-soft:#16342D; --washtx:#8FD8C3;
  --ok:#3CB39A;      --okbg:#173A30;
  --amber:#D9B45B;   --amberbg:#33290F;
  --err:#E08A72;     --errbg:#37211C;   --on-err:#2B1310;
  --info:#8AB4E8;    --infobg:#1B2938;
  --gold:#E2C064;
  --shadow1:0 1px 2px rgba(0,0,0,.25);
  --shadow2:0 1px 2px rgba(0,0,0,.25),0 6px 18px rgba(0,0,0,.3);
  --scrim:rgba(0,0,0,.55);
}}
/* Explicit override wins over the media query, both directions (decision 2). */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#1C1F1B; --surface:#252A24; --surface2:#232823;
  --line:#333A31; --line2:#414A3E;
  --tx:#EEF0EC; --tx2:#AEB3AA; --tx3:#7B8177;
  --accent:#3CB39A; --accent-deep:#8FD8C3;
  --wash:#123F36; --wash-soft:#16342D; --washtx:#8FD8C3;
  --ok:#3CB39A;      --okbg:#173A30;
  --amber:#D9B45B;   --amberbg:#33290F;
  --err:#E08A72;     --errbg:#37211C;   --on-err:#2B1310;
  --info:#8AB4E8;    --infobg:#1B2938;
  --gold:#E2C064;
  --shadow1:0 1px 2px rgba(0,0,0,.25);
  --shadow2:0 1px 2px rgba(0,0,0,.25),0 6px 18px rgba(0,0,0,.3);
  --scrim:rgba(0,0,0,.55);
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F7F7F8; --surface:#FFFFFF; --surface2:#FDFDFC;
  --line:#E7E6E2; --line2:#DAD9D3;
  --tx:#272925; --tx2:#585A56; --tx3:#9D9D97;
  --accent:#00957F; --accent-deep:#106254;
  --wash:#ACDDCD; --wash-soft:#DDF0E9; --washtx:#0C4D43;
  --ok:#00957F;      --okbg:#E2F1EC;
  --amber:#B98F1F;   --amberbg:#FAF3DF;
  --err:#B0472F;     --errbg:#FBEFEA;   --on-err:#FFFFFF;
  --info:#3E6FA8;    --infobg:#E9F0F8;
  --gold:#E2C064;
  --shadow1:0 1px 2px rgba(35,38,31,.05);
  --shadow2:0 1px 2px rgba(35,38,31,.05),0 6px 18px rgba(35,38,31,.07);
  --scrim:rgba(20,22,19,.45);
}

/* ---- Transitional aliases ----
   The console's existing templates use these names. They let a template adopt
   the core by DELETING its :root block without renaming every var. New code
   uses the canonical names above; remove aliases per-app once migrated. */
:root{
  --card:var(--surface);
  --green:var(--accent);
  --greenD:var(--accent-deep);
}

/* ---- Base ---- */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.55 var(--sans)}
h1{font-family:var(--serif);font-weight:700;font-size:1.5rem;line-height:1.25;margin:0 0 .6rem;text-wrap:balance}
h2{font-family:var(--serif);font-weight:700;font-size:1.2rem;line-height:1.3;margin:0 0 .4rem;text-wrap:balance}
h3{font-size:.95rem;font-weight:700;margin:0 0 .35rem}
h4{font-size:.85rem;font-weight:700;margin:0 0 .3rem}
p{margin:.35rem 0 .8rem}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
/* A link inside running text is underlined, so colour is never its only mark (web UX standard C2; axe
   link-in-text-block). Class-less links only: buttons, tabs and chips drawn as links keep their own look. */
:is(p,li,td,dd,figcaption,.banner) a:not([class]){text-decoration:underline;text-underline-offset:.15em}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
code{font-family:var(--mono);font-size:.85em;background:var(--surface2);border:1px solid var(--line);border-radius:5px;padding:.08em .38em}
::selection{background:var(--wash);color:var(--washtx)}

/* Standard page widths: portal 800 / content 1080 / data 1280 */
.wrap{max-width:800px;margin:0 auto;padding:2.2rem 1.25rem 3rem}
.wrap-content{max-width:1080px;margin:0 auto;padding:2.2rem 1.25rem 3rem}
.wrap-data{max-width:1280px;margin:0 auto;padding:1.6rem 1.25rem 3rem}

/* Recurring micro-patterns */
.eyebrow{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);margin:0 0 .5rem}
.sub{font-size:.85rem;color:var(--tx2)}
.small{font-size:.82rem;color:var(--tx3)}
.tnum{font-variant-numeric:tabular-nums}

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

/* ---- Print (web UX standard Y4): always the light tokens on white paper, whatever the screen theme ----
   Same selectors as the dark blocks above, placed after them, so print wins in both directions. Each layer that
   hides controls or keeps fills does so in its own print block. */
@media print{
  :root,:root:not([data-theme="light"]),:root[data-theme="dark"]{
    color-scheme:light;
    --bg:#FFFFFF; --surface:#FFFFFF; --surface2:#FDFDFC;
    --line:#E7E6E2; --line2:#DAD9D3;
    --tx:#272925; --tx2:#585A56; --tx3:#9D9D97;
    --accent:#00957F; --accent-deep:#106254;
    --wash:#ACDDCD; --wash-soft:#DDF0E9; --washtx:#0C4D43;
    --ok:#00957F;      --okbg:#E2F1EC;
    --amber:#B98F1F;   --amberbg:#FAF3DF;
    --err:#B0472F;     --errbg:#FBEFEA;   --on-err:#FFFFFF;
    --info:#3E6FA8;    --infobg:#E9F0F8;
    --shadow1:none; --shadow2:none;
  }
  body{background:#FFFFFF}
  thead{display:table-header-group}      /* table heads repeat on every printed page */
  tr,img,svg{break-inside:avoid}
}