/*
 * Paper design tokens and fonts, split out of paper.css so a standalone page
 * (the canvas editor) can take the Paper palette without the admin-shell rules
 * that paper.css applies to every element. Inert unless <html data-ui="paper">;
 * UI family aliases keep the canvas's content fonts independent. Fonts
 * arriving after initial layout stay on the fallback for that page view.
 */

/* ----- Fonts (bundled with fonts_core, OFL) -------------------------- */

@font-face {
  font-family: "Tesserae UI Archivo";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("../../plugins/fonts_core/static/archivo/400.woff2") format("woff2");
}
@font-face {
  font-family: "Tesserae UI Archivo";
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url("../../plugins/fonts_core/static/archivo/400.woff2") format("woff2");
}
@font-face {
  font-family: "Tesserae UI Archivo";
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url("../../plugins/fonts_core/static/archivo/700.woff2") format("woff2");
}
@font-face {
  font-family: "Tesserae UI Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url("../../plugins/fonts_core/static/archivo/700.woff2") format("woff2");
}
@font-face {
  font-family: "Tesserae UI Archivo";
  font-style: normal;
  font-weight: 800;
  font-display: optional;
  src: url("../../plugins/fonts_core/static/archivo/800.woff2") format("woff2");
}
@font-face {
  font-family: "Tesserae UI Martian Mono";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("../../plugins/fonts_core/static/martian_mono/400.woff2") format("woff2");
}
@font-face {
  font-family: "Tesserae UI Martian Mono";
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url("../../plugins/fonts_core/static/martian_mono/700.woff2") format("woff2");
}

/* ----- Tokens -------------------------------------------------------- */

:root[data-ui="paper"] {
  --p-sidebar-w: 248px;
  --p-hover: #f7f3ea;
  --p-selected: #e6e0d2;
  --p-sheet-edge: #e2dccf;
  --p-sidebar: #fffdf8;
  --p-subnav: #f6f3ec;
  --p-red: #b8352a;
  --p-focus: #2b4e9b;
  /* The server mark's --p-logo-* tokens live in base.css: they never flip. */
  --p-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --t-accent: #b8352a;
  --t-accent-hover: #9e2c22;
  --t-accent-soft: #f3dcd6;
  --t-accent-fg: #fffdf8;
  --t-accent-ink: #7e231b;
  --t-accent-tint: #f3dcd6;

  --t-bg: #eeeae1;
  --t-surface: #fffdf8;
  --t-surface-soft: #faf7f0;
  --t-surface-sunk: #f1ece1;
  --t-surface-raised: #fffdf8;
  --t-fg: #1c1b19;
  --t-fg-soft: #55524b;
  --t-muted: #7a766c;
  --t-border: #e0dacd;
  --t-border-strong: #cfc8b8;
  --t-inset: #faf7f0;
  --t-inset-border: #e0dacd;

  --t-chart-1: #2b4e9b;
  --t-chart-2: #b8352a;
  --t-chart-3: #c9971c;
  --t-chart-other: #8f8a7e;

  --t-danger: #b8352a;
  --t-danger-bg: #f3dcd6;
  --t-warn: #9a6f0c;
  --t-warn-bg: #f2e7cc;
  --t-ok: #3d7a3a;
  --t-ok-bg: #e3ebdd;
  --t-pill-ok-bg: #e3ebdd;
  --t-pill-ok-fg: #3d7a3a;
  --t-pill-ok-border: #e3ebdd;
  --t-pill-warn-bg: #f2e7cc;
  --t-pill-warn-fg: #7a570a;
  --t-pill-warn-border: #f2e7cc;
  --t-pill-danger-bg: #f3dcd6;
  --t-pill-danger-fg: #9e2c22;
  --t-pill-danger-border: #f3dcd6;
  --t-pill-neutral-bg: #f1ece1;
  --t-pill-neutral-fg: #55524b;
  --t-code-bg: #f1ece1;
  --t-code-border: #e0dacd;
  --t-code-key: #2b4e9b;

  --t-font: "Tesserae UI Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-font-mono: "Tesserae UI Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --t-font-features: normal;

  --t-radius-sm: 2px;
  --t-radius: 2px;
  --t-radius-md: 2px;
  --t-radius-lg: 2px;
  --t-radius-xl: 2px;

  --t-shadow-xs: none;
  --t-shadow-sm: none;
  --t-shadow: none;
  --t-shadow-md: none;
  --t-shadow-lg: none;
  --t-shadow-xl: none;
  --t-shadow-inset: none;
  --t-ring: 0 0 0 2px color-mix(in oklab, var(--p-focus) 45%, transparent);
  --t-ring-soft: 0 0 0 2px color-mix(in oklab, var(--p-focus) 25%, transparent);
}

:root[data-ui="paper"][data-theme="dark"] {
  --p-hover: #262421;
  --p-selected: #2f2d29;
  --p-sheet-edge: #35332e;
  --p-sidebar: #1e1d1b;
  --p-subnav: #1b1a18;
  --p-red: #e06a5c;
  --p-focus: #7c9be0;

  --t-accent: #d0493c;
  --t-accent-hover: #e05a4c;
  --t-accent-soft: #3b211d;
  --t-accent-fg: #ffffff;
  --t-accent-ink: #f0a497;
  --t-accent-tint: #3b211d;

  --t-bg: #151412;
  --t-surface: #22211e;
  --t-surface-soft: #262421;
  --t-surface-sunk: #1e1d1b;
  --t-surface-raised: #22211e;
  --t-fg: #ede9df;
  --t-fg-soft: #a8a397;
  --t-muted: #8a857a;
  --t-border: #35332e;
  --t-border-strong: #45423c;
  --t-inset: #1e1d1b;
  --t-inset-border: #35332e;

  --t-chart-1: #7c9be0;
  --t-chart-2: #e06a5c;
  --t-chart-3: #d9b45a;

  --t-danger: #e58474;
  --t-danger-bg: #3b211d;
  --t-warn: #d9b45a;
  --t-warn-bg: #3a311b;
  --t-ok: #8dbf7f;
  --t-ok-bg: #24301f;
  --t-pill-ok-bg: #24301f;
  --t-pill-ok-fg: #8dbf7f;
  --t-pill-ok-border: #24301f;
  --t-pill-warn-bg: #3a311b;
  --t-pill-warn-fg: #d9b45a;
  --t-pill-warn-border: #3a311b;
  --t-pill-danger-bg: #3b211d;
  --t-pill-danger-fg: #e58474;
  --t-pill-danger-border: #3b211d;
  --t-pill-neutral-bg: #2d2b27;
  --t-pill-neutral-fg: #a8a397;
  --t-code-bg: #1e1d1b;
  --t-code-border: #35332e;
}