/*
 * yeti · Frost tokens for the website.
 * Values mirror app/frontend/src/design/tokens.css (the source of truth); names keep the app's
 * --yt-* roles. Light by default, dark follows the system.
 */

@font-face {
  font-family: "Nunito Variable";
  src: url(../fonts/nunito.woff2) format("woff2");
  font-weight: 200 1000;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono Variable";
  src: url(../fonts/jetbrains-mono.woff2) format("woff2");
  font-weight: 100 800;
  font-display: swap;
}
@font-face {
  font-family: "Bagel Fat One";
  src: url(../fonts/bagel-fat-one.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --font-sans: "Nunito Variable", "SF Pro Rounded", system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, monospace;
  --font-wordmark: "Bagel Fat One", "Arial Rounded MT Bold", system-ui, sans-serif;

  /* Brand palette: art and the stage only */
  --brand-blue-50: #EAF4FE;
  --brand-blue-100: #D4E8FC;
  --brand-blue-200: #A9D2FA;
  --brand-blue-300: #7EBBF7;
  --brand-blue-500: #288EF2;
  --brand-blue-600: #2072C2;
  --brand-blue-700: #185591;
  --brand-blue-800: #103961;
  --brand-ink: #0B1F36;
  --brand-snow: #FFFFFF;
  --brand-yeti: #288EF2;
  --brand-stage: #3A8EE0;
  --brand-lichen: #8EF228;

  /* The glacier stage: always dark blue, in both themes */
  --on-stage: #FFFFFF;
  --on-stage-muted: rgba(255, 255, 255, 0.85);
  --stage-mono: #D4E8FC;
  --stage-glass: rgba(255, 255, 255, 0.18);
  --stage-glass-hover: rgba(255, 255, 255, 0.26);
  --stage-deep: rgba(6, 18, 31, 0.28);
  --stage-line: rgba(255, 255, 255, 0.55);
  --on-stage-accent: #185591;

  /* Semantic roles (light) */
  --yt-window: #F5F9FE;
  --yt-sidebar: #EAF4FE;
  --yt-surface: #FFFFFF;
  --yt-inset: #F3F8FE;
  --yt-edge: #D4E8FC;
  --yt-line: #E1ECF8;
  --yt-line-strong: #C6DEF8;
  --yt-fg: #0B1F36;
  --yt-muted: #4A5C72;
  --yt-eyebrow: #55687F;
  --yt-hover: #DDEBFA;
  --yt-selected: #D4E8FC;
  --yt-chip: #EAF4FE;
  --yt-tint: rgba(32, 114, 194, 0.06);
  --yt-tint-strong: rgba(32, 114, 194, 0.08);
  --yt-accent: #2072C2;
  --yt-primary: #2072C2;
  --yt-primary-hover: #185591;
  --yt-on-primary: #FFFFFF;
  --yt-mono: #185591;
  --yt-focus: #2072C2;
  --yt-status-live: #3FA21A;
  --yt-status-idle: #4A5C72;
  --yt-tone-live-bg: #E9F8DA;
  --yt-tone-live-fg: #2E7A10;
  --yt-tone-off-bg: #EEF2F6;
  --yt-tone-off-fg: #4A5C72;
  --yt-shadow-raised: 0 1px 2px rgba(11, 31, 54, 0.04), 0 10px 28px rgba(16, 57, 97, 0.06);
  --yt-shadow-card: 0 6px 18px rgba(16, 57, 97, 0.08);
  --yt-shadow-float: 0 18px 44px rgba(16, 57, 97, 0.12);
  --shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 18px 40px rgba(6, 18, 31, 0.28);
  --shadow-segment: 0 1px 3px rgba(11, 31, 54, 0.14);

  /* Shape: rounder as things get bigger */
  --radius-stage: 28px;
  --radius-card: 20px;
  --radius-panel: 16px;
  --radius-row: 14px;
  --radius-box: 12px;
  --radius-control: 11px;
  --radius-field: 10px;
  --radius-control-sm: 9px;
  --radius-tile: 7px;
  --radius-tile-sm: 6px;
  --radius-pill: 9999px;

  --container-content: 1120px;
  --container-prose: 760px;

  --ease-soft: cubic-bezier(0.3, 0.7, 0.4, 1);
  --ease-spring: cubic-bezier(0.3, 0.7, 0.4, 1.5);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --yt-window: #0B1F36;
    --yt-sidebar: #081C30;
    --yt-surface: #0F2A47;
    --yt-inset: #0B2440;
    --yt-edge: #1C3B5E;
    --yt-line: #16334F;
    --yt-line-strong: #24486E;
    --yt-fg: #F5F9FE;
    --yt-muted: #9DBBDC;
    --yt-eyebrow: #9DBBDC;
    --yt-hover: #0E2F52;
    --yt-selected: #123E6B;
    --yt-chip: #123E6B;
    --yt-tint: rgba(126, 187, 247, 0.08);
    --yt-tint-strong: rgba(126, 187, 247, 0.12);
    --yt-accent: #7EBBF7;
    --yt-primary: #2072C2;
    --yt-primary-hover: #185591;
    --yt-on-primary: #FFFFFF;
    --yt-mono: #A9D2FA;
    --yt-focus: #7EBBF7;
    --yt-status-live: #8EF228;
    --yt-status-idle: #9DBBDC;
    --yt-tone-live-bg: #1E3A0E;
    --yt-tone-live-fg: #8EF228;
    --yt-tone-off-bg: #16334F;
    --yt-tone-off-fg: #9DBBDC;
    --yt-shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px rgba(0, 0, 0, 0.3);
    --yt-shadow-card: 0 6px 18px rgba(0, 0, 0, 0.35);
    --yt-shadow-float: 0 18px 44px rgba(0, 0, 0, 0.4);

    color-scheme: dark;
  }
}