/*
 * VYB LIFE — Design System: Colors & Typography
 * ================================================
 * Single source of truth for all visual tokens.
 * Import this file first in any VYB LIFE interface.
 */

/* ─── FONT FACES ─────────────────────────────────────── */
@font-face { font-family: 'Montserrat'; src: url('./fonts/Montserrat-ExtraLight.ttf'); font-weight: 200; font-style: normal; }
@font-face { font-family: 'Montserrat'; src: url('./fonts/Montserrat-ExtraLightItalic.ttf'); font-weight: 200; font-style: italic; }
@font-face { font-family: 'Montserrat'; src: url('./fonts/Montserrat-Light.ttf'); font-weight: 300; font-style: normal; }
@font-face { font-family: 'Montserrat'; src: url('./fonts/Montserrat-LightItalic.ttf'); font-weight: 300; font-style: italic; }
@font-face { font-family: 'Montserrat'; src: url('./fonts/Montserrat-Regular.ttf'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Montserrat'; src: url('./fonts/Montserrat-Italic.ttf'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'Montserrat'; src: url('./fonts/Montserrat-Medium.ttf'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'Montserrat'; src: url('./fonts/Montserrat-MediumItalic.ttf'); font-weight: 500; font-style: italic; }
@font-face { font-family: 'Montserrat'; src: url('./fonts/Montserrat-SemiBold.ttf'); font-weight: 600; font-style: normal; }
@font-face { font-family: 'Montserrat'; src: url('./fonts/Montserrat-SemiBoldItalic.ttf'); font-weight: 600; font-style: italic; }
@font-face { font-family: 'Montserrat'; src: url('./fonts/Montserrat-Bold.ttf'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Montserrat'; src: url('./fonts/Montserrat-BoldItalic.ttf'); font-weight: 700; font-style: italic; }
@font-face { font-family: 'Montserrat'; src: url('./fonts/Montserrat-ExtraBold.ttf'); font-weight: 800; font-style: normal; }
@font-face { font-family: 'Montserrat'; src: url('./fonts/Montserrat-ExtraBoldItalic.ttf'); font-weight: 800; font-style: italic; }
@font-face { font-family: 'Montserrat'; src: url('./fonts/Montserrat-Black.ttf'); font-weight: 900; font-style: normal; }
@font-face { font-family: 'Montserrat'; src: url('./fonts/Montserrat-BlackItalic.ttf'); font-weight: 900; font-style: italic; }

/* ─── COLOR PRIMITIVES ────────────────────────────────── */
:root {
  /* Core */
  --vyb-black:       #0D0C0B;   /* warm near-black */
  --vyb-white:       #FAFAF8;   /* warm near-white */
  --vyb-cream:       #F4F0E8;   /* warm cream */

  /* Stone scale — warm neutral gray */
  --stone-50:        #F7F4EF;
  --stone-100:       #EDE9E1;
  --stone-200:       #D8D2C7;
  --stone-300:       #BEB7A9;
  --stone-400:       #A09890;
  --stone-500:       #837B73;
  --stone-600:       #665E58;
  --stone-700:       #4A433E;
  --stone-800:       #302B27;
  --stone-900:       #1C1916;

  /* Accent — Warm Sand / Gold */
  --sand-100:        #F0E8D8;
  --sand-200:        #DFD0B4;
  --sand-300:        #CCBA93;
  --sand-400:        #B8A372;
  --sand-500:        #A08A56;   /* primary accent */
  --sand-600:        #7E6C42;

  /* Accent — Deep Sage / Earth */
  --sage-100:        #E0E7DC;
  --sage-200:        #C1CEB9;
  --sage-300:        #9DB097;
  --sage-400:        #7A9273;
  --sage-500:        #5E7558;   /* secondary accent */
  --sage-600:        #445840;

  /* Semantic bg surfaces */
  --bg-primary:      var(--vyb-cream);
  --bg-surface:      #FFFFFF;
  --bg-elevated:     var(--stone-50);
  --bg-inverse:      var(--stone-900);
  --bg-deep:         var(--vyb-black);

  /* ─── SEMANTIC FOREGROUND ─── */
  --fg-primary:      var(--vyb-black);
  --fg-secondary:    var(--stone-700);
  --fg-tertiary:     var(--stone-500);
  --fg-muted:        var(--stone-400);
  --fg-inverse:      var(--vyb-white);
  --fg-accent:       var(--sand-500);
  --fg-accent-sage:  var(--sage-500);

  /* ─── BORDER ─── */
  --border-subtle:   var(--stone-100);
  --border-default:  var(--stone-200);
  --border-strong:   var(--stone-400);

  /* ─── SHADOW ─── */
  --shadow-xs:       0 1px 2px rgba(13,12,11,0.05);
  --shadow-sm:       0 2px 8px rgba(13,12,11,0.07), 0 1px 2px rgba(13,12,11,0.04);
  --shadow-md:       0 4px 16px rgba(13,12,11,0.09), 0 2px 4px rgba(13,12,11,0.05);
  --shadow-lg:       0 8px 32px rgba(13,12,11,0.12), 0 2px 8px rgba(13,12,11,0.06);
  --shadow-xl:       0 16px 48px rgba(13,12,11,0.16), 0 4px 12px rgba(13,12,11,0.08);
  --shadow-glow:     0 0 32px rgba(160,138,86,0.18);  /* warm sand glow */

  /* ─── RADII ─── */
  --radius-sm:       4px;
  --radius-md:       8px;
  --radius-lg:       12px;
  --radius-xl:       16px;
  --radius-2xl:      24px;
  --radius-pill:     999px;

  /* ─── SPACING ─── */
  --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;

  /* ─── TYPOGRAPHY PRIMITIVES ─── */
  --font-family:     'Montserrat', sans-serif;

  /* Scale */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    17px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   30px;
  --text-3xl:   38px;
  --text-4xl:   48px;
  --text-5xl:   64px;
  --text-6xl:   80px;
  --text-7xl:   104px;

  /* Weights */
  --fw-extralight: 200;
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;
  --fw-black:      900;

  /* Letter spacing */
  --tracking-tight:  -0.03em;
  --tracking-normal:  0em;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.14em;
  --tracking-widest:  0.22em;

  /* Line height */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* ─── TRANSITION ─── */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
}

/* ─── SEMANTIC TYPE ROLES ─────────────────────────────── */
/* Use these classes anywhere in a VYB LIFE product.       */

.vyb-display {
  font-family: var(--font-family);
  font-weight: var(--fw-black);
  font-style: italic;
  font-size: var(--text-7xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
  text-transform: uppercase;
}

.vyb-hero {
  font-family: var(--font-family);
  font-weight: var(--fw-black);
  font-style: italic;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
  text-transform: uppercase;
}

.vyb-h1 {
  font-family: var(--font-family);
  font-weight: var(--fw-extrabold);
  font-size: var(--text-4xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

.vyb-h2 {
  font-family: var(--font-family);
  font-weight: var(--fw-bold);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

.vyb-h3 {
  font-family: var(--font-family);
  font-weight: var(--fw-semibold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

.vyb-h4 {
  font-family: var(--font-family);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
}

.vyb-subtitle {
  font-family: var(--font-family);
  font-weight: var(--fw-light);
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-secondary);
}

.vyb-body {
  font-family: var(--font-family);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
}

.vyb-body-sm {
  font-family: var(--font-family);
  font-weight: var(--fw-regular);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--fg-tertiary);
}

.vyb-caption {
  font-family: var(--font-family);
  font-weight: var(--fw-extralight);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.vyb-label {
  font-family: var(--font-family);
  font-weight: var(--fw-medium);
  font-size: var(--text-xs);
  line-height: 1;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-tertiary);
}

.vyb-quote {
  font-family: var(--font-family);
  font-weight: var(--fw-black);
  font-style: italic;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

/* ─── BASE RESET ─────────────────────────────────────── */
.vyb-root {
  font-family: var(--font-family);
  background-color: var(--bg-primary);
  color: var(--fg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}