@layer reset, tokens, base, layout, components, surface, page;

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-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: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-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: "Sora";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/sora-600-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: "Sora";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/sora-600-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: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-500-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: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-500-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;
}

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

    /* Brand palette. Periwinkle and lavender never carry text on a light surface; violet is a fill, never text. */
    --brand-navy: #091035;
    --brand-indigo: #262647;
    --brand-periwinkle: #9bacd8;
    --brand-lavender: #8b77fc;
    --brand-violet: #7360ed;

    /* Surfaces */
    --page: #f6f7fb;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --surface-sunk: #eef1f8;
    --band: var(--brand-navy);
    --wash: rgb(155 172 216 / 18%);

    /* Text and lines */
    --text-1: #091035;
    --text-2: #4a5170;
    --text-3: #5e6584;
    --line: #dde2ee;
    --line-strong: #7a82a1;

    /* The one next action and the current-stop marker */
    --accent-fill: #7360ed;
    --accent-fill-hover: #5b47d6;
    --on-accent: #ffffff;
    --accent-text: #5b47d6;
    --accent-tint: #efecfe;

    /* Ink buttons: committing actions that are not the next step */
    --ink-fill: var(--text-1);
    --ink-fill-hover: var(--brand-indigo);
    --ink-label: var(--page);

    /* On the navy band */
    --band-text: #ffffff;
    --band-text-2: #c9d2ec;
    --band-highlight: var(--brand-lavender);
    --band-line: rgb(255 255 255 / 20%);
    --band-wash: rgb(155 172 216 / 25%);
    --band-background: radial-gradient(120% 140% at 100% 0%, var(--band-wash), transparent 60%), var(--band);

    /* Status families: foreground on its own tint. Each family also owns a glyph (macros/ui.html). */
    --amber-fg: #9a5800;
    --amber-tint: #fff1d6;
    --blue-fg: #24418a;
    --blue-tint: #e6ecf8;
    --teal-fg: #075653;
    --teal-tint: #dcf2ef;
    --green-fg: #0f7a4e;
    --green-tint: #e0f2e5;
    --red-fg: #7e1818;
    --red-tint: #fbe6e4;
    --grey-fg: #5c627c;
    --grey-tint: #eceef4;

    /* Materials */
    --shadow-raised: 0 8px 24px rgb(9 16 53 / 12%);

    /* Type */
    --font-display: "Sora", "Plus Jakarta Sans", system-ui, sans-serif;
    --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    --type-display: 600 56px / 60px var(--font-display);
    --type-page-title: 600 40px / 48px var(--font-display);
    --type-section: 600 28px / 36px var(--font-display);
    --type-panel-title: 600 22px / 28px var(--font-body);
    --type-subsection: 600 18px / 24px var(--font-body);
    --type-body-large: 400 18px / 28px var(--font-body);
    --type-body: 400 16px / 24px var(--font-body);
    --type-interface: 500 14px / 20px var(--font-body);
    --type-label: 600 13px / 16px var(--font-body);
    --type-micro: 500 12px / 16px var(--font-body);
    --type-reference-large: 500 24px / 32px var(--font-mono);
    --type-reference: 500 15px / 20px var(--font-mono);

    /* Geometry: capsules are states and choices; rectangles are actions. */
    --radius-note: 2px;
    --radius-control: 6px;
    --radius-card: 10px;
    --radius-dialog: 16px;
    --radius-capsule: 999px;

    /* 4px grid */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-14: 56px;
    --space-18: 72px;
    --space-24: 96px;

    --section-space: 96px;

    --target-public: 44px;
    --target-panel: 36px;
    --measure: 68ch;

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --step-duration: 200ms;
  }

  @media (max-width: 899px) {
    :root {
      --type-display: 600 36px / 40px var(--font-display);
      --type-page-title: 600 30px / 36px var(--font-display);
      --type-section: 600 24px / 32px var(--font-display);
      --section-space: 56px;
    }
  }
}