/* =============================================================================
   FERN DESIGN TOKENS — extracted from signalwire.com/docs (live render)
   Radix-style accent + grayscale scales as generated by Fern from docs.yml:
     accent-primary  light #044ef4 (SW Blue)   dark #40e0d0 (SW Turquoise)
     background      light #FAFBFC             dark #0e0e18
   ============================================================================= */

@font-face {
  font-family: "Lexend";
  src: url("../fonts/lexend-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --spacing: 0.25rem;
  --radius: 0.25rem;

  --header-height: 64px;
  --content-width: 640px;
  --page-padding: 1.5rem;

  --font-body: "Lexend", ui-sans-serif, system-ui, sans-serif;
  --font-heading: "Instrument Sans", "Lexend", ui-sans-serif, system-ui, sans-serif;
  --font-code: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
}

/* --- Light: accent (SW Blue scale) --- */
.light, :root {
  --accent-1: #f8f9fa;
  --accent-2: #f1f5fc;
  --accent-3: #e5edfd;
  --accent-4: #d5e5ff;
  --accent-5: #c2daff;
  --accent-6: #acccff;
  --accent-7: #93b9ff;
  --accent-8: #709ffd;
  --accent-9: #044ef4;
  --accent-10: #0544d3;
  --accent-11: #104edd;
  --accent-12: #102c68;

  --accent-a1: #50515203;
  --accent-a2: #1563fc0a;
  --accent-a3: #bbd1ff55;
  --accent-a4: #d5e5ff;
  --accent-a5: #c2daff;
  --accent-a6: #acccff;
  --accent-a7: #93b9ff;
  --accent-a8: #0000ff55;
  --accent-a9: #004bf4fb;
  --accent-a10: #0040d2fa;
  --accent-a11: #0042dbef;
  --accent-a12: #001e5eef;

  --accent-contrast: #fff;
  --accent-surface: #eff4fdcc;
  --accent-indicator: #044ef4;
}

/* --- Light: grayscale --- */
.light, :root {
  --grayscale-1: #fcfcfd;
  --grayscale-2: #f9f9fb;
  --grayscale-3: #f0f0f3;
  --grayscale-4: #e8e8ec;
  --grayscale-5: #e0e1e6;
  --grayscale-6: #d9d9e0;
  --grayscale-7: #cdced6;
  --grayscale-8: #b9bbc6;
  --grayscale-9: #8b8d98;
  --grayscale-10: #80838d;
  --grayscale-11: #60646c;
  --grayscale-12: #1c2024;

  --grayscale-a1: #00005503;
  --grayscale-a2: #00005506;
  --grayscale-a3: #0000330f;
  --grayscale-a4: #00002d17;
  --grayscale-a5: #0009321f;
  --grayscale-a6: #00002f26;
  --grayscale-a7: #00062e32;
  --grayscale-a8: #00083046;
  --grayscale-a9: #00051d74;
  --grayscale-a10: #00071b7f;
  --grayscale-a11: #0007149f;
  --grayscale-a12: #000509e3;

  --grayscale-contrast: #fff;
  --grayscale-surface: #ffffffcc;
}

/* --- Dark: accent (SW Turquoise scale) --- */
.dark {
  --accent-1: #091110;
  --accent-2: #0e1b19;
  --accent-3: #062c28;
  --accent-4: #003b35;
  --accent-5: #004842;
  --accent-6: #005750;
  --accent-7: #0e6961;
  --accent-8: #0d8076;
  --accent-9: #40e0d0;
  --accent-10: #2fd5c6;
  --accent-11: #32d7c7;
  --accent-12: #b9f6ed;

  --accent-a1: #00ce0004;
  --accent-a2: #0ffb2b0e;
  --accent-a3: #00fe9820;
  --accent-a4: #00feb330;
  --accent-a5: #00fcc53e;
  --accent-a6: #00fdcf4e;
  --accent-a7: #0efdd861;
  --accent-a8: #0cffde79;
  --accent-a9: #47feeadf;
  --accent-a10: #36ffebd3;
  --accent-a11: #3affead5;
  --accent-a12: #c0fff5f6;

  --accent-contrast: #042824;
  --accent-surface: #0e281a80;
  --accent-indicator: #40e0d0;
}

/* --- Dark: grayscale --- */
.dark {
  --grayscale-1: #111113;
  --grayscale-2: #18191b;
  --grayscale-3: #212225;
  --grayscale-4: #272a2d;
  --grayscale-5: #2e3135;
  --grayscale-6: #363a3f;
  --grayscale-7: #43484e;
  --grayscale-8: #5a6169;
  --grayscale-9: #696e77;
  --grayscale-10: #777b84;
  --grayscale-11: #b0b4ba;
  --grayscale-12: #edeef0;

  --grayscale-a1: #00000000;
  --grayscale-a2: #d8f4f609;
  --grayscale-a3: #ddeaf814;
  --grayscale-a4: #d3edf81d;
  --grayscale-a5: #d9edfe25;
  --grayscale-a6: #d6ebfd30;
  --grayscale-a7: #d9edff40;
  --grayscale-a8: #d9edff5d;
  --grayscale-a9: #dfebfd6d;
  --grayscale-a10: #e5edfd7b;
  --grayscale-a11: #f1f7feb5;
  --grayscale-a12: #fcfdffef;

  --grayscale-contrast: #000;
  --grayscale-surface: rgba(0, 0, 0, 0.05);
}

/* --- Page surfaces --- */
:root {
  color-scheme: light;
  --accent: rgba(4, 78, 244, 1);
  --background: rgba(250, 251, 252, 1);
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
}

.dark {
  color-scheme: dark;
  --accent: rgba(64, 224, 208, 1);
  --background: rgba(14, 14, 24, 1);
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
}