/* ============================================
   Kellie Verne — Design Tokens
   ============================================ */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
}

:root {
  /* Colors — Neutral & Backgrounds */
  --color-bg:            #fafaf8;
  --color-surface:       #ffffff;
  --color-surface-alt:   #f0ebe3;
  --color-dark:          #3b2a1a;

  /* Colors — Accents */
  --color-orange:        #ff7500;
  --color-orange-hover:  #ffaa55;
  --color-yellow:        #ffcc00;

  /* Text — Light Surface (Using modern RGB syntax) */
  --color-text:          #3b2a1a;
  --color-text-secondary: rgb(59 42 26 / 90%);
  --color-text-muted:    rgb(59 42 26 / 55%);

  /* Text — Dark Surface */
  --color-text-inverse:           #ffffff;
  --color-text-inverse-secondary: rgb(255 255 255 / 75%);

  /* Borders */
  --color-border:        #ede5db;
  --color-border-strong: #d4c9bc;

  /* Typography — Families */
  --font-sans:           'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:           'IBM Plex Mono', monospace;

  /* Typography — Scale */
  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-lg:    1.125rem;  /* 18px */
  --text-xl:    1.25rem;   /* 20px */
  --text-2xl:   1.5rem;    /* 24px */
  --text-3xl:   2rem;      /* 32px */

  /* Spacing Scale */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  /* Layout & Containers */
  --max-width:        1200px;
  --max-width-text:   680px;
  --gutter:           clamp(1.5rem, 5vw, 3rem);

  /* Shared Properties */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  
  /* Transition Speed */
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   Dark Mode
   ============================================ */
[data-theme="dark"] {
  --color-bg:            #18110a;
  --color-surface:       #ffcc00;
  --color-surface-alt:   #2d1f10;
  --color-dark:          #0d0807;

  --color-text:          #f0e8dd;
  --color-text-secondary: rgb(240 232 221 / 88%);
  --color-text-muted:    rgb(240 232 221 / 50%);

  --color-text-inverse:           #18110a;
  --color-text-inverse-secondary: rgb(24 17 10 / 75%);

  --color-border:        #3d2c1a;
  --color-border-strong: #4e3820;
}

[data-theme="dark"] body {
  -webkit-font-smoothing: antialiased;
}