/* ============================================================
   DESIGN SYSTEM — Color, Typography & Layout Tokens
   Source: design.md (Zapier-inspired warm-cream & deep burgundy system)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@font-face { font-family:'Ubuntu Mono'; font-style:normal; font-weight:400; src:url('../fonts/UbuntuMono-R.ttf') format('truetype'); font-display:swap; }

:root {
  /* ================= 1. COLORS ================= */
  --color-primary:        #69001a; /* RNDC Burgundy CTA accent */
  --color-on-primary:     #fffefb; /* Canvas warm off-white */
  --color-ink:            #201515; /* Deep coffee ink */
  --color-ink-soft:       #2f2a26; /* Near-black with brown warmth */
  --color-ink-mid:        #36342e; /* Mid-emphasis text */
  --color-body:           #605d52; /* Default body text */
  --color-body-mid:       #939084; /* Secondary body / metadata */
  --color-mute:           #c5c0b1; /* Lowest-priority text & dividers */
  --color-canvas:         #fffefb; /* Warm-cream canvas */
  --color-canvas-soft:    #f8f4f0; /* Cream-tinted soft surface */

  /* ================= 2. SEMANTIC MAPPINGS ================= */
  --bg-page:              var(--color-canvas);
  --bg-surface:           var(--color-canvas);
  --bg-surface-soft:      var(--color-canvas-soft);
  --bg-muted:             var(--color-canvas-soft);
  --bg-inverse:           var(--color-ink);

  --fg-default:           var(--color-body);
  --fg-strong:            var(--color-ink);
  --fg-muted:             var(--color-body-mid);
  --fg-mute:              var(--color-mute);
  --fg-on-dark:           var(--color-on-primary);
  --fg-on-accent:         var(--color-on-primary);

  --accent-primary:         var(--color-primary);
  --accent-primary-hover:   #520014;
  --accent-secondary:       var(--color-ink);
  --accent-secondary-hover: var(--color-ink-soft);

  --info:                 var(--color-ink-mid);
  --success:              #2e6930;
  --warning:              #b87a14;
  --danger:               #a82e16;

  --border-default:       #e8e3d9;
  --border-strong:        var(--color-mute);
  --border-accent:        var(--color-primary);

  --focus-ring:           0 0 0 3px rgba(105, 0, 26, 0.22);

  /* BevIQ Design Palette Tokens */
  --beviq-burgundy:       var(--color-primary);
  --beviq-coffee:         var(--color-ink);
  --beviq-cream:          var(--color-canvas);
  --beviq-cream-soft:     var(--color-canvas-soft);

  /* Legacy / Backward-Compatible Aliases mapped to warm palette */
  --stratix-blue:         var(--color-primary);
  --stratix-green:        var(--color-ink-mid);
  --stratix-slate:        var(--color-ink-soft);
  --stratix-orange:       #a82e16;
  --stratix-yellow:       #b87a14;
  --stratix-cool-gray-2:  #e8e3d9;
  --stratix-cool-gray-6:  var(--color-mute);
  --stratix-black:        var(--color-ink);
  --stratix-white:        var(--color-canvas);
  --stratix-blue-05:      #f9edef;
  --stratix-blue-10:      #f2d8dc;
  --stratix-blue-20:      #e5b3bc;
  --stratix-blue-60:      #800020;
  --stratix-blue-80:      var(--color-primary);
  --stratix-green-05:     #f4f3ef;
  --stratix-green-10:     #e8e6df;
  --stratix-green-60:     #4a473e;
  --stratix-green-80:     #2f2a26;
  --stratix-slate-05:     var(--color-canvas-soft);
  --stratix-slate-10:     #ece7de;
  --stratix-slate-40:     var(--color-mute);
  --stratix-slate-80:     var(--color-ink);
  --stratix-gradient:     var(--color-primary);
  --stratix-gradient-soft:var(--color-canvas-soft);

  --chart-1: var(--color-primary);
  --chart-2: var(--color-ink-mid);
  --chart-3: var(--color-body);
  --chart-4: #a82e16;
  --chart-5: #b87a14;
  --chart-6: var(--color-mute);

  /* ================= 3. ROUNDED SCALE ================= */
  --rounded-none: 0px;
  --rounded-sm:   6px;
  --rounded-md:   12px;
  --rounded-pill: 9999px;
  --rounded-full: 9999px;

  /* Aliases for existing radius tokens */
  --radius-none: var(--rounded-none);
  --radius-sm:   var(--rounded-sm);
  --radius-md:   var(--rounded-md);
  --radius-lg:   var(--rounded-md);
  --radius-xl:   var(--rounded-md);
  --radius-pill: var(--rounded-pill);

  /* ================= 4. SPACING SYSTEM ================= */
  --space-xxs: 2px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;

  /* Numbered space aliases for existing templates */
  --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;

  --accent-bar-height: 4px;

  /* ================= 5. SHADOWS ================= */
  --shadow-xs: 0 1px 2px rgba(32, 21, 21, 0.04);
  --shadow-sm: 0 1px 3px rgba(32, 21, 21, 0.06), 0 1px 2px rgba(32, 21, 21, 0.03);
  --shadow-md: 0 4px 12px rgba(32, 21, 21, 0.08), 0 2px 4px rgba(32, 21, 21, 0.04);
  --shadow-lg: 0 12px 28px rgba(32, 21, 21, 0.10), 0 4px 10px rgba(32, 21, 21, 0.05);

  /* ================= 6. TYPOGRAPHY ================= */
  --font-display: 'Degular Display', 'Inter', system-ui, -apple-system, sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'Ubuntu Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* design.md Typography Scale */
  --fs-display-xl:     56px;
  --lh-display-xl:     56px;
  --fw-display-xl:     500;

  --fs-display-lg:     48px;
  --lh-display-lg:     48px;
  --fw-display-lg:     500;

  --fs-display-md:     32px;
  --lh-display-md:     36px;
  --fw-display-md:     500;
  --ls-display-md:     1px;

  --fs-display-sub-lg: 48px;
  --lh-display-sub-lg: 49.92px;
  --fw-display-sub-lg: 500;

  --fs-display-sub-md: 32px;
  --lh-display-sub-md: 40px;
  --fw-display-sub-md: 400;

  --fs-display-sub-sm: 24px;
  --lh-display-sub-sm: 30px;
  --fw-display-sub-sm: 600;
  --ls-display-sub-sm: -0.6px;

  --fs-display-xs:     20px;
  --lh-display-xs:     25px;
  --fw-display-xs:     700;
  --ls-display-xs:     -0.5px;

  --fs-body-lg:        20px;
  --lh-body-lg:        30px;
  --fw-body-lg:        400;
  --ls-body-lg:        -0.2px;

  --fs-body-md:        18px;
  --lh-body-md:        27px;
  --fw-body-md:        400;

  --fs-body-md-strong: 18px;
  --lh-body-md-strong: 27px;
  --fw-body-md-strong: 600;

  --fs-body-sm:        16px;
  --lh-body-sm:        24px;
  --fw-body-sm:        400;

  --fs-body-sm-strong: 16px;
  --lh-body-sm-strong: 24px;
  --fw-body-sm-strong: 600;

  --fs-caption:        14px;
  --lh-caption:        21px;
  --fw-caption:        400;

  --fs-eyebrow:        14px;
  --lh-eyebrow:        14px;
  --fw-eyebrow:        500;
  --ls-eyebrow:        1px;

  --fs-button-md:      18px;
  --lh-button-md:      27px;
  --fw-button-md:      600;

  --fs-button-sm:      14.4px;
  --lh-button-sm:      14.4px;
  --fw-button-sm:      700;
  --ls-button-sm:      0.144px;

  /* Aliases for semantic heading tokens */
  --fs-display:    var(--fs-display-xl);
  --fs-h1:         var(--fs-display-lg);
  --fs-h2:         var(--fs-display-md);
  --fs-h3:         var(--fs-display-sub-sm);
  --fs-h4:         var(--fs-display-xs);
  --fs-subhead:    var(--fs-body-md);
  --fs-body:       var(--fs-body-sm);
  --fs-sm:         var(--fs-caption);
  --lh-tight:      1.15;
  --lh-snug:       1.3;
  --lh-normal:     1.5;
  --lh-relaxed:    1.6;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide:  1px;
}

/* ================= BASE ELEMENT STYLES ================= */
html, body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-body);
  background: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  font-weight: var(--fw-display-lg);
  line-height: var(--lh-display-lg);
  color: var(--color-ink);
  margin: 0 0 var(--space-sm);
  text-transform: none; /* sentence-case per design.md */
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  font-weight: var(--fw-display-md);
  line-height: var(--lh-display-md);
  letter-spacing: var(--ls-display-md);
  color: var(--color-ink);
  margin: 0 0 var(--space-sm);
  text-transform: none;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-display-sub-sm);
  font-weight: var(--fw-display-sub-sm);
  line-height: var(--lh-display-sub-sm);
  letter-spacing: var(--ls-display-sub-sm);
  color: var(--color-ink);
  margin: 0 0 var(--space-sm);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-display-xs);
  font-weight: var(--fw-display-xs);
  line-height: var(--lh-display-xs);
  letter-spacing: var(--ls-display-xs);
  color: var(--color-ink);
  margin: 0 0 var(--space-xs);
}

.subhead {
  font-family: var(--font-sans);
  font-size: var(--fs-body-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body-md);
  color: var(--color-body);
}

p, .p {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-body);
  margin: 0 0 var(--space-sm);
}

small, .small {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--color-body-mid);
}

.caption {
  font-size: var(--fs-caption);
  color: var(--color-body-mid);
  line-height: var(--lh-caption);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-primary);
}

code, .code, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 120ms ease;
}
a:hover {
  color: var(--accent-primary-hover);
  text-decoration: underline;
}

::selection {
  background: var(--stratix-blue-10);
  color: var(--color-ink);
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}