/*
 * 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-italic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Typography */
  --font-sans: 'Helvetica Neue', Helvetica, system-ui, -apple-system, Arial, sans-serif;
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono: 'Courier New', 'SFMono-Regular', 'Menlo', monospace;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

  --text-3xs: 0.68rem;
  --text-2xs: 0.76rem;
  --text-xs: 0.84rem;
  --text-sm: 0.94rem;
  --text-base: 1.05rem;
  --text-lg: 1.28rem;
  --text-xl: 1.7rem;
  --text-2xl: 2.3rem;
  --text-3xl: 3.4rem;
  --text-4xl: 5.2rem;

  --leading-tight: 1.14;
  --leading-normal: 1.5;
  --leading-relaxed: 1.78;

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

  --weight-normal: 400;
  --weight-bold: 600;

  --h1-size: 3.4rem;
  --h2-size: 2.3rem;
  --h3-size: 1.7rem;
  --h4-size: 1.28rem;
  --h5-size: 1.05rem;
  --h6-size: 0.84rem;

  /* Spacing */
  --space-3xs: 0.0625rem;
  --space-2xs: 0.125rem;
  --space-xs: 0.375rem;
  --space-sm: 0.625rem;
  --space-sm-md: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: 5.5rem;
  --space-3xl: 9rem;

  /* Transitions */
  --transition-fast: 0.12s ease;
  --transition-base: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

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

  /* Layout */
  --max-width: 1440px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --scrollbar-w: 6px;
  --inspector-w: 260px;
  --border-width: 1px;
  --shadow-offset: 0 0 0;

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

  /* Z-index layers -- two bands. Containers (sticky..overlay) hold content.
     Transients (dropdown..alert) are raised FROM a container and must outrank
     every one of them. nav-top is platform chrome. See docs/specs/design.md. */
  --z-sticky: 100;
  --z-scanline: 8000;
  --z-nav: 9000;
  --z-modal: 9100;
  --z-overlay: 9500;
  --z-dropdown: 9600;
  --z-menu: 9700;
  --z-toast: 9800;
  --z-alert: 9900;
  --z-nav-top: 9999;
  /* Background layers */
  --bg-base: #f6f2ec;
  --bg-surface: #ffffff;
  --bg-elevated: #ffffff;
  --bg-overlay: #e3ddd3;
  --bg-reverse: #231f20;

  /* Text hierarchy */
  --text-primary: #231f20;
  --text-secondary: #3d3937;
  --text-muted: #a6988e;
  --text-accent: #7a5a45;
  --text-reverse: #f6f2ec;

  /* Borders */
  --border-subtle: #e3ddd3;
  --border-default: #cfc7bc;
  --border-strong: #a6988e;

  /* Edge ink + text-on-accent */
  --text-on-accent: #f6f2ec;
  --edge-line: #231f20;
  --edge-shadow: #cfc7bc;

  /* Functional colors */
  --color-positive: #8b9c7e;
  --color-negative: #b5776a;
  --color-warning: #c9a875;
  --color-info: #8d9aa8;

  /* Functional text */
  --text-positive: #5c6b50;
  --text-negative: #8a5346;
  --text-warning: #8a6c3c;
  --text-info: #5e6b79;

  /* 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: #bfafad;
  --accent-1-dim: rgba(191, 175, 173, 0.16);
  --accent-2: #d6c7c4;
  --accent-2-dim: rgba(214, 199, 196, 0.16);
  --accent-3: #a98d80;
  --accent-3-dim: rgba(169, 141, 128, 0.16);
  --accent-4: #8b6a55;
  --accent-4-dim: rgba(139, 106, 85, 0.16);
  --accent-5: #6e4a34;
  --accent-5-dim: rgba(110, 74, 52, 0.16);
  --accent-6: #2e211b;
  --accent-6-dim: rgba(46, 33, 27, 0.16);

  /* Isometric face fills */
  --face-top: #d6c7c4;
  --face-front: #bfafad;
  --face-side: #a98d80;

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

  /* Overlay */
  --overlay-bg: rgba(35, 31, 32, 0.55);
}

@media (max-width: 768px) {
  :root {
    --text-3xs: 0.845rem;
    --text-2xs: 0.893rem;
    --text-xs: 0.939rem;
    --text-sm: 0.993rem;
    --text-base: 1.05rem;
    --text-lg: 1.159rem;
    --text-xl: 1.336rem;
    --text-2xl: 1.554rem;
    --text-3xl: 1.889rem;
    --text-4xl: 2.337rem;
    --h1-size: 1.889rem;
    --h2-size: 1.554rem;
    --h3-size: 1.336rem;
    --h4-size: 1.159rem;
    --h5-size: 1.05rem;
    --h6-size: 0.939rem;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Background layers */
    --bg-base: #1c1613;
    --bg-surface: #241d19;
    --bg-elevated: #2e2620;
    --bg-overlay: #3a2f27;
    --bg-reverse: #f0e8dd;

    /* Text hierarchy */
    --text-primary: #f0e8dd;
    --text-secondary: #cdbfb1;
    --text-muted: #8f8073;
    --text-accent: #d6b394;
    --text-reverse: #1c1613;

    /* Borders */
    --border-subtle: #2e2620;
    --border-default: #3d332b;
    --border-strong: #5a4c40;

    /* Edge ink + text-on-accent */
    --text-on-accent: #1c1613;
    --edge-line: #f0e8dd;
    --edge-shadow: #3d332b;

    /* Functional colors */
    --color-positive: #a3b394;
    --color-negative: #cf8f80;
    --color-warning: #dcbc88;
    --color-info: #a3b0be;

    /* Functional text */
    --text-positive: #b0bfa2;
    --text-negative: #dda294;
    --text-warning: #e6c99c;
    --text-info: #b3bfcb;

    /* 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: #cbbcb9;
    --accent-1-dim: rgba(203, 188, 185, 0.18);
    --accent-2: #e0d3d0;
    --accent-2-dim: rgba(224, 211, 208, 0.18);
    --accent-3: #c0a294;
    --accent-3-dim: rgba(192, 162, 148, 0.18);
    --accent-4: #a88467;
    --accent-4-dim: rgba(168, 132, 103, 0.18);
    --accent-5: #d6b394;
    --accent-5-dim: rgba(214, 179, 148, 0.18);
    --accent-6: #f0e8dd;
    --accent-6-dim: rgba(240, 232, 221, 0.18);

    /* Isometric face fills */
    --face-top: #3a2f27;
    --face-front: #2e2620;
    --face-side: #241d19;

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

    /* Overlay */
    --overlay-bg: rgba(10, 7, 5, 0.72);
  }
}

:root[data-theme="dark"] {
  /* Background layers */
  --bg-base: #1c1613;
  --bg-surface: #241d19;
  --bg-elevated: #2e2620;
  --bg-overlay: #3a2f27;
  --bg-reverse: #f0e8dd;

  /* Text hierarchy */
  --text-primary: #f0e8dd;
  --text-secondary: #cdbfb1;
  --text-muted: #8f8073;
  --text-accent: #d6b394;
  --text-reverse: #1c1613;

  /* Borders */
  --border-subtle: #2e2620;
  --border-default: #3d332b;
  --border-strong: #5a4c40;

  /* Edge ink + text-on-accent */
  --text-on-accent: #1c1613;
  --edge-line: #f0e8dd;
  --edge-shadow: #3d332b;

  /* Functional colors */
  --color-positive: #a3b394;
  --color-negative: #cf8f80;
  --color-warning: #dcbc88;
  --color-info: #a3b0be;

  /* Functional text */
  --text-positive: #b0bfa2;
  --text-negative: #dda294;
  --text-warning: #e6c99c;
  --text-info: #b3bfcb;

  /* 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: #cbbcb9;
  --accent-1-dim: rgba(203, 188, 185, 0.18);
  --accent-2: #e0d3d0;
  --accent-2-dim: rgba(224, 211, 208, 0.18);
  --accent-3: #c0a294;
  --accent-3-dim: rgba(192, 162, 148, 0.18);
  --accent-4: #a88467;
  --accent-4-dim: rgba(168, 132, 103, 0.18);
  --accent-5: #d6b394;
  --accent-5-dim: rgba(214, 179, 148, 0.18);
  --accent-6: #f0e8dd;
  --accent-6-dim: rgba(240, 232, 221, 0.18);

  /* Isometric face fills */
  --face-top: #3a2f27;
  --face-front: #2e2620;
  --face-side: #241d19;

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

  /* Overlay */
  --overlay-bg: rgba(10, 7, 5, 0.72);
}