/* Simpaul OS design tokens.
   The palette is Simpaul Design's own, as on simpauldesign.com and the CRM:
   warm paper, navy ink (#213343), one orange accent (#ff5e29) and four
   category hues drawn from the brand's olive, rose, amber and blue. Every
   colour in the app comes from here, so a re-skin is a change to this file
   only. Each text pair below was checked against WCAG AA. */

@layer tokens, base, components, shell, views, utilities;

@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  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: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@layer tokens {
  :root {
    color-scheme: light;

    /* Paper and surfaces */
    --bg: #faf9f5;
    --side-bg: #fdfcf9;
    --surface: #ffffff;
    --surface-2: #f4f2ec;
    --surface-3: #e8e6dc;
    --band: #fff0e7;
    --band-2: #ffdccb;
    --line: #ebe8df;
    --line-strong: #dcd8cc;

    /* Ink */
    --ink: #213343;
    --ink-2: #4a5866;
    --ink-3: #5b6774;
    /* Text on the orange accent: deep navy passes AA (5.6:1); white would not (3:1). */
    --on-accent: #111c26;
    /* Borders that identify form controls need 3:1 against the surface. */
    --field-line: #848c96;

    /* Accent */
    --accent: #ff5e29;
    --accent-deep: #b9390c;
    --accent-soft: #ffe6da;
    --accent-ring: rgb(255 94 41 / 0.28);

    /* Category hues: stages, charts, avatars */
    --c1: #3f76ad;
    --c2: #e39a2d;
    --c3: #788c5d;
    --c4: #ff5f74;
    --c1-soft: #e1ebf5;
    --c2-soft: #fcefd9;
    --c3-soft: #e9eee0;
    --c4-soft: #ffe3e7;

    /* Status */
    --good: #4b5f33;
    --good-bg: #e9eee0;
    --warn: #8a4f00;
    --warn-bg: #fcefd9;
    --bad: #b3202f;
    --bad-bg: #ffe3e7;

    /* Type */
    --font: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --fs-xs: 0.75rem;
    --fs-sm: 0.84375rem;
    --fs-md: 0.9375rem;
    --fs-lg: 1.125rem;
    --fs-xl: clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem);
    --fs-fig: clamp(1.75rem, 1.2rem + 1.3vw, 2.5rem);
    --fs-title: clamp(1.625rem, 1.1rem + 1.4vw, 2.25rem);

    /* Space and shape */
    --side-w: clamp(252px, 18vw, 288px);
    --edge: max(clamp(16px, 2.2vw, 40px), env(safe-area-inset-left), env(safe-area-inset-right));
    --gap: clamp(14px, 1.2vw, 20px);
    --pad: clamp(16px, 1.3vw, 22px);
    --r-card: 14px;
    --r-sm: 9px;
    --r-pill: 99px;
    --top-h: 64px;

    /* Depth */
    --shadow: 0 1px 0 rgb(33 51 67 / 0.03), 0 10px 28px -20px rgb(33 51 67 / 0.28);
    --shadow-lift: 0 2px 0 rgb(33 51 67 / 0.03), 0 26px 50px -24px rgb(33 51 67 / 0.42);
    --shadow-pop: 0 1px 0 rgb(33 51 67 / 0.04), 0 18px 40px -16px rgb(33 51 67 / 0.32);
    --scrim-color: rgb(17 26 35 / 0.42);

    /* Motion */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Layers */
    --z-side: 40;
    --z-top: 30;
    --z-pop: 60;
    --z-toast: 90;
  }

  :root[data-density="compact"] {
    --pad: clamp(12px, 1vw, 16px);
    --gap: clamp(10px, 0.9vw, 14px);
  }

  :root[data-theme="dark"] {
    color-scheme: dark;

    --bg: #111a23;
    --side-bg: #131d27;
    --surface: #18232f;
    --surface-2: #1f2b38;
    --surface-3: #283646;
    --band: #1b2733;
    --band-2: #263545;
    --line: #243241;
    --line-strong: #314255;

    --ink: #f3f1ec;
    --ink-2: #c4ccd4;
    --ink-3: #9aa5b0;
    --on-accent: #111c26;
    --field-line: #687a8c;

    --accent: #ff7442;
    --accent-deep: #ff9970;
    --accent-soft: #3d2418;
    --accent-ring: rgb(255 116 66 / 0.32);

    --c1: #6fa0d8;
    --c2: #f0b45a;
    --c3: #a3b886;
    --c4: #ff8597;
    --c1-soft: #1d3046;
    --c2-soft: #3c2e17;
    --c3-soft: #2a3322;
    --c4-soft: #47212a;

    --good: #b3cb92;
    --good-bg: #263021;
    --warn: #f2bd6b;
    --warn-bg: #3b2b12;
    --bad: #ff8f99;
    --bad-bg: #471d23;

    --shadow: 0 1px 0 rgb(0 0 0 / 0.2), 0 12px 30px -20px rgb(0 0 0 / 0.7);
    --shadow-lift: 0 2px 0 rgb(0 0 0 / 0.2), 0 28px 54px -24px rgb(0 0 0 / 0.85);
    --shadow-pop: 0 1px 0 rgb(0 0 0 / 0.25), 0 20px 44px -16px rgb(0 0 0 / 0.75);
    --scrim-color: rgb(0 0 0 / 0.55);
  }
}