/*
 * POE.DIGITAL DESIGN TOKENS
 * Generated from theme.yaml -- do not edit manually
 */

@font-face {
  font-family: 'Fraunces';
  src: url('/design/fonts/fraunces/fraunces-v38-latin-regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('/design/fonts/fraunces/fraunces-v38-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('/design/fonts/fraunces/fraunces-v38-latin-900.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('/design/fonts/fraunces/fraunces-v38-latin-italic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Anton';
  src: url('/design/fonts/anton/anton-v27-latin-regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Mono';
  src: url('/design/fonts/space-mono/space-mono-v17-latin-regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Mono';
  src: url('/design/fonts/space-mono/space-mono-v17-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Typography */
  --font-sans: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-serif: 'Fraunces', Georgia, serif;
  --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-display: 'Anton', Impact, sans-serif;

  --text-3xs: 0.72rem;
  --text-2xs: 0.8rem;
  --text-xs: 0.9rem;
  --text-sm: 1rem;
  --text-base: 1.12rem;
  --text-lg: 1.4rem;
  --text-xl: 2rem;

  --leading-tight: 1.02;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.14em;

  --weight-normal: 400;
  --weight-bold: 900;

  --h1-size: 2.6rem;
  --h2-size: 1.6rem;
  --h3-size: 1.2rem;
  --h4-size: 1rem;
  --h5-size: 0.9rem;
  --h6-size: 0.8rem;

  /* Spacing */
  --space-3xs: 0.0625rem;
  --space-2xs: 0.125rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-sm-md: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Transitions */
  --transition-fast: 0.1s ease;
  --transition-base: 0.18s ease;
  --transition-slow: 0.34s ease;

  /* Nav */
  --nav-h: 48px;

  /* Layout */
  --max-width: 740px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 13px;
  --border-width: 1px;
  --shadow-offset: 1.2px 1.1px 0;
  --scrollbar-w: 8px;
  --inspector-w: 260px;

  /* Components */
  --press-offset: translate(var(--space-2xs), var(--space-2xs));
  --press-snap: 0.05s;

  /* Z-index layers */
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-toast: 300;
  --z-menu: 400;
  --z-scanline: 8000;
  --z-nav: 9000;
  --z-modal: 9100;
  --z-overlay: 9500;
  --z-alert: 9900;
  /* Background layers */
  --bg-base: #f5f4f0;
  --bg-surface: #e4e2db;
  --bg-elevated: #ffffff;
  --bg-overlay: #efede8;
  --bg-reverse: #141310;

  /* Text hierarchy */
  --text-primary: #141310;
  --text-secondary: #3a352b;
  --text-muted: #6d685d;
  --text-accent: #000000;
  --text-reverse: #f5f4f0;

  /* Borders */
  --border-subtle: #c8c4ba;
  --border-default: #b3aea0;
  --border-strong: #5f5b4f;

  /* Edge ink + text-on-accent */
  --text-on-accent: #141310;
  --edge-line: #141310;
  --edge-shadow: #141310;

  /* Functional colors */
  --color-positive: #3f8f5f;
  --color-negative: #c0504a;
  --color-warning: #b88a2a;
  --color-info: #3f6fb0;

  /* Functional text */
  --text-positive: #2f6f48;
  --text-negative: #9c3f3a;
  --text-warning: #8a661f;
  --text-info: #2f5488;

  /* Functional dims (derived) */
  --color-positive-dim: color-mix(in srgb, var(--color-positive) 18%, transparent);
  --color-negative-dim: color-mix(in srgb, var(--color-negative) 18%, transparent);
  --color-warning-dim:  color-mix(in srgb, var(--color-warning) 18%, transparent);
  --color-info-dim:     color-mix(in srgb, var(--color-info) 18%, transparent);
  --color-muted-dim:    color-mix(in srgb, var(--text-muted) 16%, transparent);

  /* Accent colors */
  --accent-1: #7cc4dd;
  --accent-1-dim: rgba(124, 196, 221, 0.12);
  --accent-2: #1b3ad6;
  --accent-2-dim: rgba(27, 58, 214, 0.12);
  --accent-3: #b88a2a;
  --accent-3-dim: rgba(184, 138, 42, 0.12);
  --accent-4: #c0504a;
  --accent-4-dim: rgba(192, 80, 74, 0.12);
  --accent-5: #6a5acd;
  --accent-5-dim: rgba(106, 90, 205, 0.12);
  --accent-6: #2f8f8f;
  --accent-6-dim: rgba(47, 143, 143, 0.12);

  /* Isometric face fills */
  --face-top: #1e2028;
  --face-front: #161820;
  --face-side: #101218;

  /* Grid */
  --grid-dot: #e4e1d8;

  /* Overlay */
  --overlay-bg: rgba(20, 19, 16, 0.42);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Background layers */
    --bg-base: #131210;
    --bg-surface: #1f1c18;
    --bg-elevated: #2a2723;
    --bg-overlay: #000000;
    --bg-reverse: #141310;

    /* Text hierarchy */
    --text-primary: #f2efe9;
    --text-secondary: #cdc7bb;
    --text-muted: #8e8980;
    --text-accent: #ffffff;
    --text-reverse: #f2efe9;

    /* Borders */
    --border-subtle: #34302a;
    --border-default: #4a4640;
    --border-strong: #b2b0ae;

    /* Edge ink + text-on-accent */
    --text-on-accent: #131210;
    --edge-line: #f2efe9;
    --edge-shadow: #000000;

    /* Functional colors */
    --color-positive: #7fcf9b;
    --color-negative: #f0a09b;
    --color-warning: #e6cb8e;
    --color-info: #8ec2f5;

    /* Functional text */
    --text-positive: #8bd4a3;
    --text-negative: #f3aaa6;
    --text-warning: #ead29a;
    --text-info: #a3cdf7;

    /* Functional dims (derived) */
    --color-positive-dim: color-mix(in srgb, var(--color-positive) 18%, transparent);
    --color-negative-dim: color-mix(in srgb, var(--color-negative) 18%, transparent);
    --color-warning-dim:  color-mix(in srgb, var(--color-warning) 18%, transparent);
    --color-info-dim:     color-mix(in srgb, var(--color-info) 18%, transparent);
    --color-muted-dim:    color-mix(in srgb, var(--text-muted) 16%, transparent);

    /* Accent colors */
    --accent-1: #7cc4dd;
    --accent-1-dim: rgba(124, 196, 221, 0.18);
    --accent-2: #8094ff;
    --accent-2-dim: rgba(128, 148, 255, 0.18);
    --accent-3: #e6cb8e;
    --accent-3-dim: rgba(230, 203, 142, 0.18);
    --accent-4: #f0a09b;
    --accent-4-dim: rgba(240, 160, 155, 0.18);
    --accent-5: #c2a8f2;
    --accent-5-dim: rgba(194, 168, 242, 0.18);
    --accent-6: #8ad9df;
    --accent-6-dim: rgba(138, 217, 223, 0.18);

    /* Isometric face fills */
    --face-top: #1e2028;
    --face-front: #161820;
    --face-side: #101218;

    /* Grid */
    --grid-dot: #2a2723;

    /* Overlay */
    --overlay-bg: rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  /* Background layers */
  --bg-base: #131210;
  --bg-surface: #1f1c18;
  --bg-elevated: #2a2723;
  --bg-overlay: #000000;
  --bg-reverse: #141310;

  /* Text hierarchy */
  --text-primary: #f2efe9;
  --text-secondary: #cdc7bb;
  --text-muted: #8e8980;
  --text-accent: #ffffff;
  --text-reverse: #f2efe9;

  /* Borders */
  --border-subtle: #34302a;
  --border-default: #4a4640;
  --border-strong: #b2b0ae;

  /* Edge ink + text-on-accent */
  --text-on-accent: #131210;
  --edge-line: #f2efe9;
  --edge-shadow: #000000;

  /* Functional colors */
  --color-positive: #7fcf9b;
  --color-negative: #f0a09b;
  --color-warning: #e6cb8e;
  --color-info: #8ec2f5;

  /* Functional text */
  --text-positive: #8bd4a3;
  --text-negative: #f3aaa6;
  --text-warning: #ead29a;
  --text-info: #a3cdf7;

  /* Functional dims (derived) */
  --color-positive-dim: color-mix(in srgb, var(--color-positive) 18%, transparent);
  --color-negative-dim: color-mix(in srgb, var(--color-negative) 18%, transparent);
  --color-warning-dim:  color-mix(in srgb, var(--color-warning) 18%, transparent);
  --color-info-dim:     color-mix(in srgb, var(--color-info) 18%, transparent);
  --color-muted-dim:    color-mix(in srgb, var(--text-muted) 16%, transparent);

  /* Accent colors */
  --accent-1: #7cc4dd;
  --accent-1-dim: rgba(124, 196, 221, 0.18);
  --accent-2: #8094ff;
  --accent-2-dim: rgba(128, 148, 255, 0.18);
  --accent-3: #e6cb8e;
  --accent-3-dim: rgba(230, 203, 142, 0.18);
  --accent-4: #f0a09b;
  --accent-4-dim: rgba(240, 160, 155, 0.18);
  --accent-5: #c2a8f2;
  --accent-5-dim: rgba(194, 168, 242, 0.18);
  --accent-6: #8ad9df;
  --accent-6-dim: rgba(138, 217, 223, 0.18);

  /* Isometric face fills */
  --face-top: #1e2028;
  --face-front: #161820;
  --face-side: #101218;

  /* Grid */
  --grid-dot: #2a2723;

  /* Overlay */
  --overlay-bg: rgba(0, 0, 0, 0.6);
}