/* Custom properties only. Nothing here selects an element —
   except the @font-face rules, which declare a family rather than style one.

   Phase 11 D2: one token layer, flat values. `light-dark()` and
   `color-scheme: light dark` came out — the design is a single warm-cream
   theme with no dark counterpart drawn, and inventing one would ship colours
   nobody designed. Dark mode returns as its own design pass if it is wanted. */

@layer tokens {

  /* D7. Self-hosted, no runtime CDN (CLAUDE.md #9). Google serves Schibsted
     Grotesk as a VARIABLE font: the css2 API returns the same latin file for
     400, 500, 600, 700 and 800, so one face with a weight RANGE is the whole
     of it. Five files would be five copies of these bytes.
     `/vendor/**` already carries a one-year immutable Cache-Control. */
  @font-face {
    font-family: "Schibsted Grotesk";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("/vendor/fonts/schibsted-grotesk-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;
  }

  :root {

    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --content-width: 1180px;
    --measure: 68ch;

    /* Every font-size is multiplied by this, on every page — the
       dashboard included. */
    --type-scale: 1.25;

    --font-sans:
      "Schibsted Grotesk",
      system-ui,
      -apple-system,
      sans-serif;

    --font-mono:
      ui-monospace,
      SFMono-Regular,
      Menlo,
      monospace;

    /* The mockup's BROWSER SHELL is `background: #fff` (design.html:44) and the
       artboard sits inside it. `#fbf7f0` is the desktop behind that window —
       the mockup's own page, not Follo's. The page ground is white. */
    --surface: #fff;           /* page ground */
    --surface-raised: #fff;    /* floats above the page on border + shadow */
    --surface-veil: #fdfbf7;   /* warm panels and cards ON the white ground */
    --surface-sunken: #f6f1e8; /* tinted wells and hover */
    --surface-warm: #fbf7f0;   /* a full-bleed band set off from the page */

    --text: #101a3d;
    --text-secondary: #4b5573;
    --text-muted: #6b7391;

    --hairline: #f0e9dd;
    --border: #e6ded1;
    --border-strong: #d8cfc0;

    /* The design's own variable for this is `teal` (design.html:1741) and the
       brand swatch is the second of its four options. Its `#1b4dff` default,
       and the `#eef1ff` tint derived from it, are the mockup's placeholder. */
    --accent: #0a6b6b;
    --accent-tint: #e9f4f3;
    /* QR PLAN: the item page's "Get link and QR code" row (design `openQr`). */
    --share-tint: #f1f5d6;
    --share-border: #e3eab8;
    /* /for/realtors' "what might help" tiles: one tint and ink per option. */
    --tile-credit-bg: #fdf1e2;
    --tile-credit-fg: #8a5a1e;
    --tile-financing-bg: #eaf1f9;
    --tile-financing-fg: #2f5f9e;
    --tile-price-bg: #efeefa;
    --tile-price-fg: #4f4aa8;
    --on-accent: #fff;      /* label colour on an accent fill */
    --on-dark: var(--surface-warm);  /* label colour on an ink fill */
    --on-dark-muted: #c3ccf0;        /* secondary label on an ink fill */
    --accent-warm: #ffd166;
    --focus-field: #e59800; /* the design's focus ring on a text control */

    /* The plan screen's return-from-Stripe banners (design showPlan,
       planConfirming / planConfirmedShow). */
    --notice-pending-bg: #fff4cc;
    --notice-pending-border: #f0cf6b;
    --notice-pending-fg: #5c4300;
    --notice-pending-ring: #e5b73b;
    --notice-done-bg: #e4f4e8;
    --notice-done-border: #a9d8b6;
    --notice-done-fg: #1d5230;

    --success: #3f8f5f;     /* the design's "back in stock" alert bar */
    --signal-neutral: #8d93ab;  /* the design's "update" alert bar (Part J Q4) */

    /* The modal scrim and card lift (design.html:790, 803). Colours with an
       alpha are still colours, so they live here too. */
    --scrim: rgb(16 26 61 / .42);
    --shadow-modal: 0 30px 60px -30px rgb(16 26 61 / .6);
    --shadow-menu: 0 18px 40px -22px rgb(16 26 61 / .55);
    --shadow-phone: 0 22px 50px -26px rgb(16 26 61 / .7);

    --danger: #c4564b;
    --danger-strong: #a4423a;
    --danger-tint: #fbeeec;

    /* Design Products Q2: one pair per item state, from the activity card's
       pills (design `activityVals`). Used by .status-pill--{state}. */
    --status-active-bg: #e4f1e8;
    --status-active-fg: #24613a;
    --status-expiring-bg: #fde7c2;
    --status-expiring-fg: #7a4300;
    --status-expired-bg: #ece9e3;
    --status-expired-fg: var(--text-secondary);
    --status-sold-bg: #e3e7f3;
    --status-sold-fg: var(--text);
    --status-draft-bg: #f3eee6;
    --status-draft-fg: var(--text-secondary);

    --nav-surface: #26346e;    /* dash sidebar */
    --nav-text: #ccd6ff;
    --nav-text-muted: #9aa8dd; /* the sidebar footer's summary line */

    /* Stand-in product photography for the shopper-side illustration on / and
       /shoppers, taken from the design's own seed data. These are CONTENT, not
       palette: nothing but those four thumbnails may reference them, and they
       go away the day the illustration uses real photographs. They live here
       only because a hex outside this file is a bug. */
    --swatch-chair: #d9cbb8;
    --swatch-throw: #c3d3c4;
    --swatch-skillet: #b9b2ac;
    --swatch-mugs: #e0cdb0;

    /* Orgs PLAN: the org switcher's badges (design `orgs()`). A personal org
       is round and sand; any other is square, gold or sage. */
    --org-swatch-gold: #ffd166;
    --org-swatch-sage: #c3d3c4;
    --org-swatch-personal: #e0cdb0;
    --border-hover: #c9bfae; /* the switcher's hover border */
    --checkbox-border: #b9b0a2; /* an unticked checkbox (the design's feedback tiles) */
    /* Settings' Members (design `memberVals`): two more member swatches, the
       role tags, the Invited pill, and a dashed add box. */
    --org-swatch-sand: #e0cdb0;
    --org-swatch-periwinkle: #ccd6ff;
    --role-tag-bg: #f2f5ff;
    --role-tag-fg: #2a3a8f;
    --invited-bg: #fff4d6;
    --invited-fg: #7a5a00;
    --add-dashed: #a9cfc9;
    --card-border: #eee6d9;
    --row-rule: #f3ede3;
    --button-disabled: #b8bccb;
  }
}