/* ============================================================
   Arnio Design System — Variables & Tokens
   ============================================================ */

:root {
  /* ── Color Palette (Light) ────────────────────────────── */
  --color-bg:              #ffffff;
  --color-bg-alt:          #f6f8fa;
  --color-surface:         #f6f8fa;
  --color-surface-hover:   #eaeef2;
  --color-border:          #d0d7de;
  --color-border-subtle:   #e8ecf0;

  --color-text:            #1f2328;
  --color-text-secondary:  #656d76;
  --color-text-tertiary:   #8b949e;
  --color-text-inverse:    #ffffff;

  --color-accent:          #0969da;
  --color-accent-hover:    #0550ae;
  --color-accent-subtle:   #ddf4ff;
  --color-accent-text:     #0969da;
  --color-discord:         #5865f2;
  --color-discord-hover:   #4752c4;

  --color-success:         #1a7f37;
  --color-success-subtle:  #dafbe1;
  --color-warning:         #9a6700;
  --color-warning-subtle:  #fff8c5;
  --color-danger:          #cf222e;

  /* Navy tones for hero/header */
  --color-navy:            #0d1b2a;
  --color-navy-light:      #1b2838;
  --color-navy-mid:        #1b3a5c;

  /* Code block */
  --color-code-bg:         #f6f8fa;
  --color-code-text:       #1f2328;
  --color-code-border:     #d0d7de;
  --color-code-keyword:    #cf222e;
  --color-code-string:     #0a3069;
  --color-code-comment:    #6e7781;
  --color-code-function:   #8250df;
  --color-code-number:     #0550ae;

  /* ── Typography ───────────────────────────────────────── */
  --font-sans:             'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:             'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;

  --font-size-xs:          0.75rem;    /* 12px */
  --font-size-sm:          0.875rem;   /* 14px */
  --font-size-base:        1rem;       /* 16px */
  --font-size-md:          1.125rem;   /* 18px */
  --font-size-lg:          1.25rem;    /* 20px */
  --font-size-xl:          1.5rem;     /* 24px */
  --font-size-2xl:         1.875rem;   /* 30px */
  --font-size-3xl:         2.25rem;    /* 36px */
  --font-size-4xl:         3rem;       /* 48px */

  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;

  --line-height-tight:     1.25;
  --line-height-normal:    1.5;
  --line-height-relaxed:   1.75;

  --letter-spacing-tight:  -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.025em;

  /* ── Spacing (8px grid) ───────────────────────────────── */
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* ── Border Radius ────────────────────────────────────── */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-full:  9999px;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:   0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg:   0 10px 25px rgba(0, 0, 0, 0.1);
  --shadow-xl:   0 20px 50px rgba(0, 0, 0, 0.12);

  /* ── Transitions ──────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ── Layout ───────────────────────────────────────────── */
  --container-max:     1140px;
  --container-wide:    1320px;
  --nav-height:        64px;
}

/* ── Dark Theme ─────────────────────────────────────────── */
[data-theme="dark"] {
  --color-bg:              #0d1117;
  --color-bg-alt:          #010409;
  --color-surface:         #161b22;
  --color-surface-hover:   #1c2129;
  --color-border:          #30363d;
  --color-border-subtle:   #21262d;

  --color-text:            #e6edf3;
  --color-text-secondary:  #8b949e;
  --color-text-tertiary:   #656d76;
  --color-text-inverse:    #0d1117;

  --color-accent:          #58a6ff;
  --color-accent-hover:    #79c0ff;
  --color-accent-subtle:   #0d1d30;
  --color-accent-text:     #58a6ff;
  --color-discord:         #5865f2;
  --color-discord-hover:   #6d78ff;

  --color-success:         #3fb950;
  --color-success-subtle:  #0f2d16;
  --color-warning:         #d29922;
  --color-warning-subtle:  #2e1f00;
  --color-danger:          #f85149;

  --color-navy:            #0d1117;
  --color-navy-light:      #161b22;
  --color-navy-mid:        #1c3050;

  --color-code-bg:         #161b22;
  --color-code-text:       #e6edf3;
  --color-code-border:     #30363d;
  --color-code-keyword:    #ff7b72;
  --color-code-string:     #a5d6ff;
  --color-code-comment:    #8b949e;
  --color-code-function:   #d2a8ff;
  --color-code-number:     #79c0ff;

  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 10px 25px rgba(0, 0, 0, 0.5);
  --shadow-xl:   0 20px 50px rgba(0, 0, 0, 0.6);
}