/* Keycaps design tokens.
   Canonical source: app-auth/src/design/theme.css.
   The Tailwind v4 @theme wrapper is flattened here for this static app. */

@font-face {
  font-family: "Fraunces Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/fraunces-latin-full-normal.woff2") format("woff2-variations");
  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: "Nunito Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/fonts/nunito-sans-latin-400-normal.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: "Nunito Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("/fonts/nunito-sans-latin-600-normal.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: "Nunito Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("/fonts/nunito-sans-latin-700-normal.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;
}

:root {
  --color-cloud: #f5f5f3;
  --color-plate: #fdfdfb;
  --color-fog: #c3c9d2;
  --color-slate: #5c6570;
  --color-graphite: #3a3f47;

  --color-coral: #e25a3f;
  --color-coral-deep: #b23a24;
  --color-coral-key: #c7452c;
  --color-coral-edge: #8f2d1a;
  --color-coral-hover: #d14e33;
  --color-coral-bright: #f0765c;
  --color-mint: #4fbfa3;
  --color-mint-deep: #1b6f5a;
  --color-mint-tint: #ddf2ec;
  --color-mint-bright: #63d4b8;
  --color-mustard: #efb93f;
  --color-mustard-deep: #8a6414;
  /* Mustard Deep reads 4.46:1 on the mustard tint — just under AA. This
     darker step passes (≥4.9:1) for warning text set on tinted chips. */
  --color-mustard-ink: #7d5a12;
  --color-mustard-tint: #f9e9c0;
  --color-mustard-bright: #f5c95e;
  --color-signal: #5ab8e8;
  --color-signal-deep: #22688f;
  --color-signal-bright: #7ccbf2;
  --color-danger: #c7302b;
  --color-danger-bright: #f08a80;

  --font-display: "Fraunces Variable", Georgia, "Times New Roman", serif;
  --font-body:
    "Nunito Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --radius-key: 10px;
  --radius-plate: 18px;

  --surface: var(--color-cloud);
  --surface-raised: var(--color-plate);
  --border: var(--color-fog);
  --divider: #e7e7e3;
  --muted: var(--color-slate);
  --ink: var(--color-graphite);

  --key-face-primary: var(--color-coral-key);
  --key-face-primary-hover: var(--color-coral-deep);
  --key-edge-primary: var(--color-coral-edge);
  --key-text-primary: var(--color-plate);
  --key-face-neutral-hover: #f7f7f4;

  --chip-bg: var(--color-mint-tint);
  --chip-text: var(--color-mint-deep);
  --chip-edge: var(--color-mint);

  --link: var(--color-signal-deep);
  --focus: var(--color-coral);

  --success-text: var(--color-mint-deep);
  --success-bg: #eef9f5;
  --success-border: #bbe4d2;
  --danger-text: var(--color-danger);
  --danger-bg: #fbf1f0;
  --danger-border: #efb3ac;

  --highlight-bg: var(--color-mustard-tint);

  --edge-w: 4px;
  --shadow-plate:
    0 1px 2px rgb(58 63 71 / 0.06), 0 10px 28px rgb(58 63 71 / 0.1);
  --dur-press: 120ms;

  /* Workbench extension tokens and compatibility aliases. */
  --font-mono:
    ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --warning-text: var(--color-mustard-ink);
  --warning-bg: var(--color-mustard-tint);
  --warning-border: var(--color-mustard);
  --info-text: var(--color-signal-deep);
  --info-bg: #eaf6fc;
  --info-border: #addcf3;

  --color-text-primary: var(--ink);
  --color-text-secondary: var(--muted);
  --color-text-tertiary: var(--muted);
  --color-text-disabled: var(--muted);
  --color-text-on-action: var(--key-text-primary);
  --color-surface-page: var(--surface);
  --color-surface-panel: var(--surface-raised);
  --color-surface-selected: var(--success-bg);
  --color-border: var(--divider);
  --color-border-interactive: var(--border);
  --color-action: var(--link);
  --color-action-hover: var(--color-signal-deep);
  --color-link: var(--link);
  --color-focus: var(--focus);
  --color-status-critical: var(--danger-text);
  --color-status-critical-surface: var(--danger-bg);
  --color-status-attention: var(--warning-text);
  --color-status-attention-surface: var(--warning-bg);
  --color-status-info: var(--info-text);
  --color-status-info-surface: var(--info-bg);
  --color-status-neutral: var(--success-text);
  --color-status-neutral-surface: var(--success-bg);
  --font-prose: var(--font-body);
  --font-ui: var(--font-body);
  --radius-static: var(--radius-plate);
  --radius-tag: 8px;
  --radius-control: var(--radius-key);
  --radius-selectable: var(--radius-key);
  --radius-pill: 999px;
  --control-min-block-size: 50px;
  --focus-ring: 3px solid var(--focus);
  --focus-ring-offset: 3px;
  --shadow-overlay: var(--shadow-plate);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --surface: #15181d;
    --surface-raised: #1e2228;
    --border: #4a515c;
    --divider: #2a2f36;
    --muted: #a8b0bb;
    --ink: #edeff2;

    --key-face-primary: var(--color-coral-bright);
    --key-face-primary-hover: #e96a4f;
    --key-edge-primary: var(--color-coral);
    --key-text-primary: #15181d;
    --key-face-neutral-hover: #262b33;

    --chip-bg: #16332b;
    --chip-text: var(--color-mint-bright);
    --chip-edge: var(--color-mint-deep);

    --link: var(--color-signal-bright);
    --focus: var(--color-coral-bright);

    --success-text: var(--color-mint-bright);
    --success-bg: #12251f;
    --success-border: #1e4a3c;
    --danger-text: var(--color-danger-bright);
    --danger-bg: #2c1715;
    --danger-border: #6e332f;

    --highlight-bg: #453611;

    --shadow-plate: none;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --warning-text: var(--color-mustard-bright);
    --warning-bg: #453611;
    --warning-border: var(--color-mustard-deep);
    --info-text: var(--color-signal-bright);
    --info-bg: #162a35;
    --info-border: #285b72;
  }
}

/* Existing shared preference support from jflamb-theme. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #15181d;
  --surface-raised: #1e2228;
  --border: #4a515c;
  --divider: #2a2f36;
  --muted: #a8b0bb;
  --ink: #edeff2;
  --key-face-primary: var(--color-coral-bright);
  --key-face-primary-hover: #e96a4f;
  --key-edge-primary: var(--color-coral);
  --key-text-primary: #15181d;
  --key-face-neutral-hover: #262b33;
  --chip-bg: #16332b;
  --chip-text: var(--color-mint-bright);
  --chip-edge: var(--color-mint-deep);
  --link: var(--color-signal-bright);
  --focus: var(--color-coral-bright);
  --success-text: var(--color-mint-bright);
  --success-bg: #12251f;
  --success-border: #1e4a3c;
  --danger-text: var(--color-danger-bright);
  --danger-bg: #2c1715;
  --danger-border: #6e332f;
  --highlight-bg: #453611;
  --shadow-plate: none;
  --warning-text: var(--color-mustard-bright);
  --warning-bg: #453611;
  --warning-border: var(--color-mustard-deep);
  --info-text: var(--color-signal-bright);
  --info-bg: #162a35;
  --info-border: #285b72;
}

:root[data-theme="light"] {
  color-scheme: light;
  --surface: var(--color-cloud);
  --surface-raised: var(--color-plate);
  --border: var(--color-fog);
  --divider: #e7e7e3;
  --muted: var(--color-slate);
  --ink: var(--color-graphite);
  --key-face-primary: var(--color-coral-key);
  --key-face-primary-hover: var(--color-coral-deep);
  --key-edge-primary: var(--color-coral-edge);
  --key-text-primary: var(--color-plate);
  --key-face-neutral-hover: #f7f7f4;
  --chip-bg: var(--color-mint-tint);
  --chip-text: var(--color-mint-deep);
  --chip-edge: var(--color-mint);
  --link: var(--color-signal-deep);
  --focus: var(--color-coral);
  --success-text: var(--color-mint-deep);
  --success-bg: #eef9f5;
  --success-border: #bbe4d2;
  --danger-text: var(--color-danger);
  --danger-bg: #fbf1f0;
  --danger-border: #efb3ac;
  --highlight-bg: var(--color-mustard-tint);
  --shadow-plate:
    0 1px 2px rgb(58 63 71 / 0.06), 0 10px 28px rgb(58 63 71 / 0.1);
  --warning-text: var(--color-mustard-ink);
  --warning-bg: var(--color-mustard-tint);
  --warning-border: var(--color-mustard);
  --info-text: var(--color-signal-deep);
  --info-bg: #eaf6fc;
  --info-border: #addcf3;
}

@media print {
  :root {
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --ink: #000000;
    --shadow-plate: none;
  }
}