/* SCF Sale Calendar design tokens.
   Wave 2, 2026-09-07: the SCF company accent is powder blue. Coral is retired
   from this surface. One accent only. Text on an accent fill is always a dark
   ink of the accent family, never white. */
:root{
  /* grounds */
  --linen:#FAF8F3;
  --linen-2:#F1EEE6;
  --paper:#FDFCFA;
  --rule:#E3DDD0;
  --rule-2:#CDC5B3;

  /* ink */
  --ink:#25221C;
  --ink-2:#4A463E;
  --muted:#7A7364;
  --ghost:#A79C86;

  /* the accent: powder blue */
  --accent:#A7C7E7;        /* the slab and every primary fill */
  --accent-deep:#8FB4DE;   /* hover on an accent fill */
  --accent-strong:#2F6099; /* the accent as text or a small mark on a light ground */
  --accent-ink:#15283D;    /* ink sitting ON the accent fill */
  --accent-ink-2:#3E5B78;  /* secondary text on the accent fill */
  --accent-soft:#E8F0F8;   /* faint accent wash */

  /* state */
  --good:#2F6B4F;
  --good-soft:#E4EFE7;
  --bad:#B3341C;
  --bad-soft:#FAE7E1;
  --warn:#8A6A1F;
  --warn-soft:#F6EED8;

  /* sale kinds. The two discount events share the accent family, deep for half
     price and light for its 40 percent tail, so the pair reads as one story. */
  --k-half:#2F6099;   --k-half-ink:#EAF2FA;
  --k-tail:#A7C7E7;   --k-tail-ink:#15283D;
  --k-new:#25221C;    --k-new-ink:#F7F5EF;
  --k-clear:#7A7364;  --k-clear-ink:#F7F5EF;
  --k-flash:#B34A38;  --k-flash-ink:#FFF3EE;
  --k-other:#CDC5B3;  --k-other-ink:#25221C;

  /* people, identity colours, deliberately outside the kind set */
  --u-idan:#15283D;
  --u-likith:#2F6099;
  --u-ari:#B34A38;
  --u-myer:#5F7D6A;

  /* type */
  --f-display:'Cabinet Grotesk',system-ui,sans-serif;
  --f-ui:'Satoshi',system-ui,sans-serif;

  /* shape */
  --r-lg:1rem;
  --r-md:.65rem;
  --r-sm:.4rem;
  --rail-w:272px;
  --topbar-h:64px;
  --drawer-w:560px;

  /* motion */
  --ease:cubic-bezier(.32,.72,0,1);
  --spring:cubic-bezier(.34,1.4,.44,1);

  /* shadows, only these two */
  --shadow-drag:0 24px 48px -20px rgba(37,34,28,.45);
  --shadow-drawer:-24px 0 60px -30px rgba(37,34,28,.35);

  /* the veil behind a drawer, dialog or sheet */
  --veil:rgba(37,34,28,.3);

  color-scheme:light;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --linen:#1B1712;
    --linen-2:#221D17;
    --paper:#16130F;
    --rule:#332D24;
    --rule-2:#4A4235;
    --ink:#F4ECDC;
    --ink-2:#D9D0BE;
    --muted:#A79C86;
    --ghost:#6E6556;
    --accent:#2F6099;
    --accent-deep:#3E74B0;
    --accent-strong:#A7C7E7;
    --accent-ink:#EAF2FA;
    --accent-ink-2:#B9D0E8;
    --accent-soft:#16283A;
    --good:#6DBE93;  --good-soft:#17281E;
    --bad:#F0836B;   --bad-soft:#2E1712;
    --warn:#D9B45A;  --warn-soft:#2C2412;
    --k-half:#5B8FC7;  --k-half-ink:#0B1622;
    --k-tail:#3E5B78;  --k-tail-ink:#DCE9F5;
    --k-new:#F4ECDC;   --k-new-ink:#1B1712;
    --k-clear:#A79C86; --k-clear-ink:#1B1712;
    --k-flash:#D8583B; --k-flash-ink:#1A0B07;
    --k-other:#4A4235; --k-other-ink:#F4ECDC;
    --u-idan:#DCE9F5;
    --u-likith:#7FAAD8;
    --u-ari:#F0B8A6;
    --u-myer:#93B39F;
    --shadow-drag:0 24px 48px -20px rgba(0,0,0,.7);
    --shadow-drawer:-24px 0 60px -30px rgba(0,0,0,.6);
    --veil:rgba(0,0,0,.55);
    color-scheme:dark;
  }
}

:root[data-theme="dark"]{
  --linen:#1B1712;
  --linen-2:#221D17;
  --paper:#16130F;
  --rule:#332D24;
  --rule-2:#4A4235;
  --ink:#F4ECDC;
  --ink-2:#D9D0BE;
  --muted:#A79C86;
  --ghost:#6E6556;
  --accent:#2F6099;
  --accent-deep:#3E74B0;
  --accent-strong:#A7C7E7;
  --accent-ink:#EAF2FA;
  --accent-ink-2:#B9D0E8;
  --accent-soft:#16283A;
  --good:#6DBE93;  --good-soft:#17281E;
  --bad:#F0836B;   --bad-soft:#2E1712;
  --warn:#D9B45A;  --warn-soft:#2C2412;
  --k-half:#5B8FC7;  --k-half-ink:#0B1622;
  --k-tail:#3E5B78;  --k-tail-ink:#DCE9F5;
  --k-new:#F4ECDC;   --k-new-ink:#1B1712;
  --k-clear:#A79C86; --k-clear-ink:#1B1712;
  --k-flash:#D8583B; --k-flash-ink:#1A0B07;
  --k-other:#4A4235; --k-other-ink:#F4ECDC;
  --u-idan:#DCE9F5;
  --u-likith:#7FAAD8;
  --u-ari:#F0B8A6;
  --u-myer:#93B39F;
  --shadow-drag:0 24px 48px -20px rgba(0,0,0,.7);
  --shadow-drawer:-24px 0 60px -30px rgba(0,0,0,.6);
  --veil:rgba(0,0,0,.55);
  color-scheme:dark;
}

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