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

@font-face {
  font-family: 'Balle';
  src: url('/design/fonts/balle/balle-thin-soft.woff2') format('woff2'),
       url('/design/fonts/balle/balle-thin-soft.woff') format('woff'),
       url('/design/fonts/balle/balle-thin-soft.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Balle';
  src: url('/design/fonts/balle/balle-bold-soft.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Typography */
  --font-sans: 'Balle', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Georgia', serif;
  --font-mono: 'Courier New', 'SFMono-Regular', 'Menlo', monospace;
  --font-display: 'sans-serif', sans-serif;

  --text-3xs: 0.87rem;
  --text-2xs: 0.95rem;
  --text-xs: 1.03rem;
  --text-sm: 1.1rem;
  --text-base: 1.26rem;
  --text-lg: 1.5rem;
  --text-xl: 1.9rem;

  --leading-tight: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.05em;

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

  --h1-size: 1.9rem;
  --h2-size: 1.5rem;
  --h3-size: 1.15rem;
  --h4-size: 1rem;
  --h5-size: 0.875rem;
  --h6-size: 0.75rem;

  /* 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.16s ease;
  --transition-slow: 0.28s ease;

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

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

  /* 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: #f5f7fa;
  --bg-surface: #ffffff;
  --bg-elevated: #ffffff;
  --bg-overlay: #eef1f6;
  --bg-reverse: #000000;

  /* Text hierarchy */
  --text-primary: #000000;
  --text-secondary: #232323;
  --text-muted: #4b4b4b;
  --text-accent: #000000;
  --text-reverse: #f5f7fa;

  /* Borders */
  --border-subtle: #e7eaf0;
  --border-default: #d3d9e3;
  --border-strong: #b4bcca;

  /* Edge ink + text-on-accent */
  --text-on-accent: #121a26;
  --edge-line: var(--text-primary);
  --edge-shadow: var(--text-primary);

  /* Functional colors */
  --color-positive: #84c8a6;
  --color-negative: #e79b9b;
  --color-warning: #e6c489;
  --color-info: #8fb0ec;

  /* Functional text */
  --text-positive: #574758;
  --text-negative: #6c8a78;
  --text-warning: #496262;
  --text-info: #935e59;

  /* 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: #7fa6ec;
  --accent-1-dim: rgba(127, 166, 236, 0.15);
  --accent-2: #7fc6a4;
  --accent-2-dim: rgba(127, 198, 164, 0.15);
  --accent-3: #e6c081;
  --accent-3-dim: rgba(230, 192, 129, 0.15);
  --accent-4: #e79b9b;
  --accent-4-dim: rgba(231, 155, 155, 0.15);
  --accent-5: #b09fe2;
  --accent-5-dim: rgba(176, 159, 226, 0.15);
  --accent-6: #86c2d6;
  --accent-6-dim: rgba(134, 194, 214, 0.15);

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

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

  /* Overlay */
  --overlay-bg: rgba(20, 28, 42, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Background layers */
    --bg-base: #27272b;
    --bg-surface: #2c2d2f;
    --bg-elevated: #313234;
    --bg-overlay: #373738;
    --bg-reverse: #313234;

    /* Text hierarchy */
    --text-primary: #e6edf3;
    --text-secondary: #b2c2d2;
    --text-muted: #6e7b8a;
    --text-accent: #ffffff;
    --text-reverse: #e6edf3;

    /* Borders */
    --border-subtle: #35383b;
    --border-default: #343b44;
    --border-strong: #48505a;

    /* Edge ink + text-on-accent */
    --text-on-accent: #1b1f26;
    --edge-line: #5f6a79;
    --edge-shadow: #3f4654;

    /* Functional colors */
    --color-positive: #84cf9f;
    --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: #8ec2f5;
    --accent-1-dim: rgba(142, 194, 245, 0.18);
    --accent-2: #84cf9f;
    --accent-2-dim: rgba(132, 207, 159, 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: #2a2a30;

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

:root[data-theme="dark"] {
  /* Background layers */
  --bg-base: #27272b;
  --bg-surface: #2c2d2f;
  --bg-elevated: #313234;
  --bg-overlay: #373738;
  --bg-reverse: #313234;

  /* Text hierarchy */
  --text-primary: #e6edf3;
  --text-secondary: #b2c2d2;
  --text-muted: #6e7b8a;
  --text-accent: #ffffff;
  --text-reverse: #e6edf3;

  /* Borders */
  --border-subtle: #35383b;
  --border-default: #343b44;
  --border-strong: #48505a;

  /* Edge ink + text-on-accent */
  --text-on-accent: #1b1f26;
  --edge-line: #5f6a79;
  --edge-shadow: #3f4654;

  /* Functional colors */
  --color-positive: #84cf9f;
  --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: #8ec2f5;
  --accent-1-dim: rgba(142, 194, 245, 0.18);
  --accent-2: #84cf9f;
  --accent-2-dim: rgba(132, 207, 159, 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: #2a2a30;

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