/**
 * Qenlo Design System Tokens
 * Version: 1.0.0
 * Namespace: qenlo
 * 
 * Auto-generated with 100% parity to tokens.json.
 */

/* ==========================================================================
   1. Typography / Font Faces
   ========================================================================== */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/IBMPlexSans-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/IBMPlexMono-Regular.woff2') format('woff2');
}

/* ==========================================================================
   2. Design Tokens Root & Light Palette (Default)
   ========================================================================== */

:root,
[data-theme="light"] {
  /* Palette - Light Theme */
  --qenlo-color-background: #F7F5F0;
  --qenlo-color-text: #1D2320;
  --qenlo-color-muted-text: #5A615D;
  --qenlo-color-accent: #B53C2F;
  --qenlo-color-on-accent: #FFFFFF;
  --qenlo-color-surface: #EFECE6;
  --qenlo-color-surface-raised: #E6E2DA;
  --qenlo-color-border: #D8D3C8;
  --qenlo-color-border-strong: #878E8A;
  --qenlo-color-focus: #B53C2F;

  /* Font Families */
  --qenlo-font-family-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --qenlo-font-family-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Font Weights */
  --qenlo-font-weight-regular: 400;
  --qenlo-font-weight-semibold: 600;

  /* Type Scale */
  --qenlo-font-size-xs: 0.75rem;     /* 12px */
  --qenlo-font-size-sm: 0.875rem;    /* 14px */
  --qenlo-font-size-base: 1rem;       /* 16px */
  --qenlo-font-size-lg: 1.125rem;    /* 18px */
  --qenlo-font-size-xl: 1.375rem;    /* 22px */
  --qenlo-font-size-2xl: 1.75rem;    /* 28px */
  --qenlo-font-size-3xl: 2.25rem;    /* 36px */

  /* Spacing Scale (4/8-based) */
  --qenlo-space-1: 0.25rem;          /* 4px */
  --qenlo-space-2: 0.5rem;           /* 8px */
  --qenlo-space-3: 0.75rem;          /* 12px */
  --qenlo-space-4: 1rem;             /* 16px */
  --qenlo-space-6: 1.5rem;           /* 24px */
  --qenlo-space-8: 2rem;             /* 32px */
  --qenlo-space-12: 3rem;            /* 48px */
  --qenlo-space-16: 4rem;            /* 64px */
}

/* ==========================================================================
   3. Dark Palette
   ========================================================================== */

[data-theme="dark"] {
  /* Palette - Dark Theme */
  --qenlo-color-background: #171C19;
  --qenlo-color-text: #F7F5F0;
  --qenlo-color-muted-text: #AAB3AD;
  --qenlo-color-accent: #EF8B79;
  --qenlo-color-on-accent: #171C19;
  --qenlo-color-surface: #1F2622;
  --qenlo-color-surface-raised: #2A332E;
  --qenlo-color-border: #2E3833;
  --qenlo-color-border-strong: #6E7C74;
  --qenlo-color-focus: #EF8B79;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --qenlo-color-background: #171C19;
    --qenlo-color-text: #F7F5F0;
    --qenlo-color-muted-text: #AAB3AD;
    --qenlo-color-accent: #EF8B79;
    --qenlo-color-on-accent: #171C19;
    --qenlo-color-surface: #1F2622;
    --qenlo-color-surface-raised: #2A332E;
    --qenlo-color-border: #2E3833;
    --qenlo-color-border-strong: #6E7C74;
    --qenlo-color-focus: #EF8B79;
  }
}