/* ============================================================
   WARMFLOW ADVERTISING LTD. — Design Tokens
   colors_and_type.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300;1,9..40,400&family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@300;400;500&display=swap');

/* ─────────────────────────────────────────────
   COLOR PRIMITIVES
   ───────────────────────────────────────────── */
:root {
  /* Deep / Grounding Tones */
  --wf-ink:        #1a1917;   /* warm black — dominant dark */
  --wf-charcoal:   #2c2b28;   /* deep graphite */
  --wf-graphite:   #3f3e3a;   /* mid dark */
  --wf-ash:        #5a5955;   /* upper mid dark */
  --wf-stone:      #7a7870;   /* mid neutral */

  /* Light / Neutral Tones */
  --wf-fog:        #b8b6b0;   /* borders, dividers */
  --wf-silver:     #d0cec9;   /* input borders */
  --wf-linen:      #e8e5df;   /* secondary background */
  --wf-ivory:      #f4f2ed;   /* primary background */
  --wf-white:      #faf9f6;   /* card / surface white */

  /* Emotional Accent Tones */
  --wf-olive:      #6b7055;   /* muted olive — primary accent */
  --wf-sage:       #8a9078;   /* smoky green — secondary accent */
  --wf-taupe:      #9e9283;   /* warm taupe */
  --wf-sand:       #c4b89a;   /* sand beige */
  --wf-bronze:     #8a7055;   /* aged bronze — premium detail */
  --wf-khaki:      #a09060;   /* deep khaki */

  /* ─────────────────────────────────────────────
     SEMANTIC COLOR TOKENS
     ───────────────────────────────────────────── */

  /* Text */
  --color-text-primary:    var(--wf-ink);
  --color-text-secondary:  var(--wf-stone);
  --color-text-tertiary:   var(--wf-fog);
  --color-text-inverse:    var(--wf-ivory);
  --color-text-accent:     var(--wf-olive);

  /* Backgrounds */
  --color-bg-base:         var(--wf-ivory);
  --color-bg-surface:      var(--wf-white);
  --color-bg-subtle:       var(--wf-linen);
  --color-bg-dark:         var(--wf-ink);
  --color-bg-dark-subtle:  var(--wf-charcoal);

  /* Borders */
  --color-border:          var(--wf-fog);
  --color-border-light:    var(--wf-linen);
  --color-border-strong:   var(--wf-stone);

  /* Accents */
  --color-accent:          var(--wf-olive);
  --color-accent-warm:     var(--wf-bronze);
  --color-accent-light:    var(--wf-sand);

  /* ─────────────────────────────────────────────
     TYPOGRAPHY PRIMITIVES
     ───────────────────────────────────────────── */

  --font-sans:    'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-serif:   'DM Serif Display', Georgia, serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

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

  /* Size Scale */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    22px;
  --text-xl:    28px;
  --text-2xl:   36px;
  --text-3xl:   48px;
  --text-4xl:   64px;
  --text-5xl:   80px;
  --text-display: 96px;

  /* Line Heights */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  /* Letter Spacing */
  --tracking-tightest: -0.035em;
  --tracking-tight:    -0.02em;
  --tracking-snug:     -0.01em;
  --tracking-normal:    0em;
  --tracking-wide:      0.04em;
  --tracking-wider:     0.08em;
  --tracking-widest:    0.14em;

  /* ─────────────────────────────────────────────
     SPACING SYSTEM (8px base)
     ───────────────────────────────────────────── */

  --space-1:   8px;
  --space-2:   16px;
  --space-3:   24px;
  --space-4:   32px;
  --space-5:   48px;
  --space-6:   64px;
  --space-7:   96px;
  --space-8:  128px;
  --space-9:  192px;

  /* ─────────────────────────────────────────────
     BORDER RADIUS
     ───────────────────────────────────────────── */

  --radius-none: 0px;
  --radius-xs:   2px;   /* default — architectural, almost sharp */
  --radius-sm:   4px;   /* cards */
  --radius-md:   6px;   /* modals */
  --radius-full: 999px; /* only for tags/pills if ever needed */

  /* ─────────────────────────────────────────────
     SHADOW SYSTEM
     ───────────────────────────────────────────── */

  --shadow-0: none;
  --shadow-1: 0 1px 4px rgba(26, 25, 23, 0.06);
  --shadow-2: 0 4px 16px rgba(26, 25, 23, 0.08);
  --shadow-3: 0 8px 32px rgba(26, 25, 23, 0.12);
  --shadow-4: 0 16px 56px rgba(26, 25, 23, 0.16);

  /* ─────────────────────────────────────────────
     TRANSITIONS
     ───────────────────────────────────────────── */

  --ease-out: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast:   150ms;
  --duration-base:   300ms;
  --duration-slow:   500ms;
  --duration-slower: 700ms;

  /* ─────────────────────────────────────────────
     LAYOUT
     ───────────────────────────────────────────── */

  --max-width-content: 1200px;
  --max-width-text: 680px;
  --max-width-narrow: 480px;

  --grid-gutter: 32px;
  --grid-margin: 64px;
}

/* ─────────────────────────────────────────────
   SEMANTIC TYPE ROLES
   ───────────────────────────────────────────── */

.wf-display {
  font-family: var(--font-serif);
  font-size: var(--text-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tightest);
  color: var(--color-text-primary);
}

.wf-h1 {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.wf-h2 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--color-text-primary);
}

.wf-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-primary);
}

.wf-h4 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-primary);
}

.wf-body-lg {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
}

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

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

.wf-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.wf-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-secondary);
}

.wf-numeral {
  font-family: var(--font-sans);
  font-size: var(--text-5xl);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-tightest);
  line-height: 1;
  color: var(--color-text-primary);
}