/* ============================================================
   COZIFY · COLORS & TYPE
   Design tokens — single source of truth.
   Source: cozify-design-system-v1.html (Mayo 2026)
   ============================================================ */

/* ---------- Brand fonts (local variable fonts, WOFF2) ---------- */
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-VariableFont_SOFT_WONK_opsz_wght.woff2') format('woff2-variations'),
       url('fonts/Fraunces-VariableFont_SOFT_WONK_opsz_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-Italic-VariableFont_SOFT_WONK_opsz_wght.woff2') format('woff2-variations'),
       url('fonts/Fraunces-Italic-VariableFont_SOFT_WONK_opsz_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz_wght.woff2') format('woff2-variations'),
       url('fonts/Inter-VariableFont_opsz_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.woff2') format('woff2-variations'),
       url('fonts/Inter-Italic-VariableFont_opsz_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- BRAND COLORS ---------- */
  --color-terracota:        #E07856;
  --color-terracota-dark:   #C25E3F;
  --color-terracota-light:  #F2A88D;
  --color-crema:            #FFF4E6;
  --color-crema-soft:       #FFFAF2;
  --color-oliva:            #7A8B5C;
  --color-oliva-dark:       #5E6B45;
  --color-cacao:            #3D2817;
  --color-dorado:           #E8B547;
  --color-rosa:             #F4D4C2;

  /* ---------- LILY MASCOT PALETTE ---------- */
  --lily-blue:        #8A8A95;
  --lily-blue-light:  #A3A3AE;
  --lily-ear:         #5C5C66;
  --lily-tan:         #A87850;
  --lily-nose:        #1F1812;

  /* ---------- SEMANTIC ---------- */
  --color-primary:  var(--color-terracota);
  --color-success:  var(--color-oliva);
  --color-warning:  var(--color-dorado);
  --color-error:    #B84A3A;
  --color-info:     #6B8AB0;

  /* ---------- SURFACE ---------- */
  --surface-base:     var(--color-crema);
  --surface-elevated: var(--color-crema-soft);
  --surface-card:     #FFFFFF;
  --surface-inverse:  var(--color-cacao);

  /* ---------- TEXT (fg) ---------- */
  --fg1: var(--color-cacao);                /* primary  */
  --fg2: rgba(61, 40, 23, 0.7);             /* secondary */
  --fg3: rgba(61, 40, 23, 0.5);             /* tertiary  */
  --fg-inverse: var(--color-crema);

  /* legacy aliases (match v1 spec) */
  --text-primary:   var(--fg1);
  --text-secondary: var(--fg2);
  --text-tertiary:  var(--fg3);
  --text-inverse:   var(--fg-inverse);

  /* ---------- BORDERS ---------- */
  --border-subtle:  rgba(61, 40, 23, 0.08);
  --border-default: rgba(61, 40, 23, 0.15);
  --border-strong:  rgba(61, 40, 23, 0.30);

  /* ---------- SPACING (4px base) ---------- */
  --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;

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

  /* ---------- SHADOWS (warm — based on cacao, not pure black) ---------- */
  --shadow-sm: 0 1px 2px   rgba(61, 40, 23, 0.05);
  --shadow-md: 0 4px 12px  rgba(61, 40, 23, 0.08);
  --shadow-lg: 0 12px 32px rgba(61, 40, 23, 0.12);
  --shadow-xl: 0 24px 48px rgba(61, 40, 23, 0.16);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Fraunces', Georgia, serif;       /* warm editorial serif w/ italic */
  --font-body:    'Inter', system-ui, sans-serif;   /* functional, neutral */
  --font-mono:    'SF Mono', 'Fira Code', Consolas, monospace;

  /* ---------- TYPE SCALE (semantic) ---------- */
  --type-display-xl-size:   72px;  --type-display-xl-weight: 700;  --type-display-xl-tracking: -0.03em;
  --type-display-lg-size:   48px;  --type-display-lg-weight: 700;  --type-display-lg-tracking: -0.02em;
  --type-display-md-size:   32px;  --type-display-md-weight: 600;  --type-display-md-tracking: -0.02em;
  --type-display-sm-size:   24px;  --type-display-sm-weight: 600;  --type-display-sm-tracking: -0.01em;
  --type-body-lg-size:      18px;  --type-body-lg-weight:    400;  --type-body-lg-leading:   1.6;
  --type-body-md-size:      15px;  --type-body-md-weight:    400;  --type-body-md-leading:   1.6;
  --type-body-sm-size:      13px;  --type-body-sm-weight:    400;  --type-body-sm-leading:   1.5;
  --type-caption-size:      11px;  --type-caption-weight:    600;  --type-caption-tracking:  0.1em;

  /* ---------- MOTION ---------- */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   150ms;
  --dur-base:   220ms;
  --dur-slow:   400ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Use these in product code instead of raw font-size values.
   ============================================================ */

.t-display-xl {
  font-family: var(--font-display);
  font-size: var(--type-display-xl-size);
  font-weight: var(--type-display-xl-weight);
  letter-spacing: var(--type-display-xl-tracking);
  line-height: 1;
}
.t-display-lg {
  font-family: var(--font-display);
  font-size: var(--type-display-lg-size);
  font-weight: var(--type-display-lg-weight);
  letter-spacing: var(--type-display-lg-tracking);
  line-height: 1.05;
}
.t-display-md {
  font-family: var(--font-display);
  font-size: var(--type-display-md-size);
  font-weight: var(--type-display-md-weight);
  letter-spacing: var(--type-display-md-tracking);
  line-height: 1.15;
}
.t-display-sm {
  font-family: var(--font-display);
  font-size: var(--type-display-sm-size);
  font-weight: var(--type-display-sm-weight);
  letter-spacing: var(--type-display-sm-tracking);
  line-height: 1.2;
}
.t-body-lg {
  font-family: var(--font-body);
  font-size: var(--type-body-lg-size);
  font-weight: 400;
  line-height: var(--type-body-lg-leading);
}
.t-body-md {
  font-family: var(--font-body);
  font-size: var(--type-body-md-size);
  font-weight: 400;
  line-height: var(--type-body-md-leading);
}
.t-body-sm {
  font-family: var(--font-body);
  font-size: var(--type-body-sm-size);
  font-weight: 400;
  line-height: var(--type-body-sm-leading);
}
.t-caption {
  font-family: var(--font-body);
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  letter-spacing: var(--type-caption-tracking);
  text-transform: uppercase;
}

/* The signature Fraunces italic accent — use inside a display heading
   to highlight ONE key word per line, in terracota. */
.italic-accent {
  font-style: italic;
  font-weight: 400;
  color: var(--color-terracota);
}

/* ============================================================
   ELEMENT DEFAULTS
   Optional: import this file and inherit sensible defaults.
   ============================================================ */
.cozify-base {
  font-family: var(--font-body);
  color: var(--fg1);
  background: var(--surface-base);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
.cozify-base h1 { font: 700 var(--type-display-lg-size)/1.05 var(--font-display); letter-spacing: var(--type-display-lg-tracking); }
.cozify-base h2 { font: 700 var(--type-display-md-size)/1.15 var(--font-display); letter-spacing: var(--type-display-md-tracking); }
.cozify-base h3 { font: 600 var(--type-display-sm-size)/1.2  var(--font-display); letter-spacing: var(--type-display-sm-tracking); }
.cozify-base p  { font: 400 var(--type-body-md-size)/1.6     var(--font-body); color: var(--fg2); }
.cozify-base code { font-family: var(--font-mono); font-size: 0.92em; }