/* =====================================================================
   Portfolio 2026 Design System — Colors + Type
   A single file of CSS custom properties. Everything downstream
   (components, pages, slides) consumes these vars — never raw hex.
===================================================================== */

/* Self-hosted variable font files — all subset to latin. See fonts/. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/Inter-variable.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/JetBrainsMono-variable.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/Lora-variable.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/Lora-italic-variable.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('wild-wisdom-site/project/system/fonts/roboto-slab-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url('wild-wisdom-site/project/system/fonts/roboto-400.woff2') format('woff2');
}

:root {

  /* =================================================================
     PRIMITIVE — raw palette. Never used directly in components.
  ================================================================= */

  /* Warm neutrals */
  --primitive-warm-white:  #FAF7F0;
  --primitive-off-white:   #FAF7F0;
  --primitive-warm-50:     #EFEDE8;
  --primitive-warm-100:    #E0DDD6;
  --primitive-warm-200:    #C5C1B8;
  --primitive-warm-300:    #A8A49B;
  --primitive-warm-400:    #8A857B;
  --primitive-warm-500:    #6D6860;
  --primitive-warm-600:    #524E47;
  --primitive-warm-700:    #38352F;
  --primitive-warm-800:    #232E47;
  --primitive-warm-900:    #111009;

  /* Rust orange (Claude's "Crail") — the single accent */
  --primitive-rust-50:     #FDF3EF;
  --primitive-rust-100:    #FBDFD5;
  --primitive-rust-200:    #F5B9A6;
  --primitive-rust-300:    #EC9177;
  --primitive-rust-400:    #DF6D4D;
  --primitive-rust-500:    #F5F386;   /* WW highlight */
  --primitive-rust-600:    #A14D2E;
  --primitive-rust-700:    #7E3B22;
  --primitive-rust-800:    #5B2A16;
  --primitive-rust-900:    #38190C;

  /* Absolutes */
  --primitive-white:       #FFFFFF;
  --primitive-black:       #0A0908;

  /* =================================================================
     SEMANTIC — role tokens. These go in components.
  ================================================================= */

  /* Backgrounds */
  --color-bg-page:           var(--primitive-warm-white);
  --color-bg-surface:        var(--primitive-white);
  --color-bg-surface-subtle: var(--primitive-off-white);
  --color-bg-inverse:        var(--primitive-warm-800);
  --color-bg-accent:         var(--primitive-rust-500);
  --color-bg-accent-subtle:  #C4D0F2;

  /* Borders — warm-black-tinted alpha, never gray */
  --color-border-default:    rgba(20, 16, 10, 0.08);
  --color-border-subtle:     rgba(20, 16, 10, 0.05);
  --color-border-strong:     rgba(20, 16, 10, 0.18);
  --color-border-accent:     var(--primitive-rust-500);

  /* Text */
  --color-text-primary:      var(--primitive-warm-800);
  --color-text-secondary:    #434D65;
  --color-text-tertiary:     #6B7488;
  --color-text-inverse:      var(--primitive-warm-50);
  --color-text-accent:       #859EE5;
  --color-text-on-accent:    #232E47;

  /* Actions */
  --color-action-primary:        var(--primitive-rust-500);
  --color-action-primary-hover:  #EFEC68;
  --color-action-primary-active: #E7E45D;
  --color-on-action-primary:     #232E47;

  /* =================================================================
     TYPOGRAPHY — families, scale, weights, line-heights, tracking
  ================================================================= */

  --font-family-serif: 'Roboto Slab', 'Lora', ui-serif, Georgia, serif;
  --font-family-sans:  'Roboto', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-family-mono:  'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Scale — Major Third ×1.250 */
  --font-size-xs:      0.64rem;     /* ≈10px  — labels, tags */
  --font-size-sm:      0.8rem;      /* ≈13px  — supporting */
  --font-size-base:    1rem;        /* 16px   — body */
  --font-size-md:      1.25rem;     /* 20px   — lead */
  --font-size-lg:      1.563rem;    /* ≈25px  — card h3 */
  --font-size-xl:      1.953rem;    /* ≈31px  — section h2 */
  --font-size-2xl:     2.441rem;    /* ≈39px  — page h1 */
  --font-size-3xl:     3.052rem;    /* ≈49px  — hero heading */
  --font-size-4xl:     3.815rem;    /* ≈61px  — display */
  --font-size-display: 6rem;        /* 96px   — hero super-display */

  /* Weights */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Line heights */
  --line-height-tight:   1.15;
  --line-height-snug:    1.3;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.7;

  /* Letter spacing */
  --letter-spacing-tighter: -0.03em;
  --letter-spacing-tight:   -0.01em;
  --letter-spacing-normal:   0em;
  --letter-spacing-wide:     0.04em;
  --letter-spacing-wider:    0.08em;
  --letter-spacing-display: -0.02194em;

  /* =================================================================
     SPACING — 8-point grid
  ================================================================= */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* =================================================================
     ELEVATION — multi-layered, warm-tinted
  ================================================================= */
  --elevation-0: none;
  --elevation-1:
    0px 1px 2px rgba(20, 16, 10, 0.04),
    0px 1px 4px rgba(20, 16, 10, 0.03);
  --elevation-2:
    0px 2px 4px rgba(20, 16, 10, 0.05),
    0px 4px 12px rgba(20, 16, 10, 0.06),
    0px 1px 2px rgba(20, 16, 10, 0.04);
  --elevation-3:
    0px 4px 8px rgba(20, 16, 10, 0.05),
    0px 8px 24px rgba(20, 16, 10, 0.08),
    0px 2px 4px rgba(20, 16, 10, 0.04);
  --elevation-4:
    0px 8px 16px rgba(20, 16, 10, 0.06),
    0px 16px 40px rgba(20, 16, 10, 0.10),
    0px 4px 8px  rgba(20, 16, 10, 0.04);

  /* =================================================================
     RADIUS
  ================================================================= */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* =================================================================
     MOTION
  ================================================================= */
  --duration-instant:      50ms;
  --duration-fast:         100ms;
  --duration-normal:       200ms;
  --duration-slow:         350ms;
  --duration-slower:       500ms;
  --duration-illustration: 2000ms;

  --easing-default: cubic-bezier(0.2, 0, 0, 1);
  --easing-in:      cubic-bezier(0.4, 0, 1, 1);
  --easing-out:     cubic-bezier(0.0, 0, 0.2, 1);
  --easing-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --easing-linear:  linear;

  --transition-default:
    all var(--duration-normal) var(--easing-default);
  --transition-colors:
    color var(--duration-normal) var(--easing-default),
    background-color var(--duration-normal) var(--easing-default),
    border-color var(--duration-normal) var(--easing-default);
  --transition-elevation:
    box-shadow var(--duration-normal) var(--easing-default),
    transform var(--duration-normal) var(--easing-default);

  /* =================================================================
     LAYOUT
  ================================================================= */
  --content-max-width:     1280px;
  --content-reading-width: 640px;
  --content-wide-width:    960px;
  --sidebar-width:         248px;
  --nav-height:            64px;
}

/* =====================================================================
   SEMANTIC TYPE ROLES — ready-to-use classes for content
===================================================================== */

.type-hero-display {
  font-family: var(--font-family-serif);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-display);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

.type-display {
  font-family: var(--font-family-serif);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tighter);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

.type-h1 {
  font-family: var(--font-family-serif);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tighter);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

.type-h2 {
  font-family: var(--font-family-serif);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
}

.type-h3 {
  font-family: var(--font-family-serif);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
}

.type-card-title {
  font-family: var(--font-family-serif);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
}

.type-lead {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

.type-body {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
}

.type-body-sm {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

.type-pull-quote {
  font-family: var(--font-family-serif);
  font-style: italic;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
}

.type-label {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.type-label-accent {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-accent);
}

.type-mono {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}