/* ============================================================
   Libanza — Design Tokens
   styles/tokens.css
   Two-colour brand (red + black), Raleway display/body.
   Self-hosted fonts only; no external font requests (speed/AEM).
   ============================================================ */

@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- Brand ---- */
  --libanza-red: #ED1C24;
  --libanza-red-deep: #920609;
  --libanza-black: #0E0D0C;
  --red-50: #FDECEE;
  --red-100: #FACDD1;
  --red-200: #F49AA0;
  --red-600: #A40A18;

  /* ---- Neutrals — warm paper to deep ink ---- */
  --ink-0:   #FFFFFF;
  --ink-50:  #FAF8F5;
  --ink-100: #F2EFEA;
  --ink-200: #E5E1DC;
  --ink-300: #C9C4BD;
  --ink-400: #9C968E;
  --ink-500: #6E6862;
  --ink-600: #4A4540;
  --ink-700: #2D2A27;
  --ink-800: #1A1816;
  --ink-900: #0E0D0C;

  /* ---- Semantic ---- */
  --bg:           var(--ink-0);
  --bg-muted:     var(--ink-50);
  --bg-inverted:  var(--ink-900);
  --fg-1:         var(--ink-900);
  --fg-2:         var(--ink-600);
  --fg-3:         var(--ink-500);
  --fg-muted:     var(--ink-400);
  --brand:        var(--libanza-red);
  --brand-hover:  var(--libanza-red-600);
  --brand-deep:   var(--libanza-red-deep);
  --brand-soft:   var(--red-50);
  --brand-gradient: linear-gradient(176deg, var(--libanza-red-deep) 0%, var(--libanza-red) 78%);

  --border:        rgba(14,13,12,0.10);
  --border-subtle: rgba(14,13,12,0.07);
  --border-strong: rgba(14,13,12,0.18);
  --border-on-dark: rgba(255,255,255,0.10);

  /* ---- Elevation & radii ---- */
  --shadow-card: 0 4px 16px rgba(14,13,12,0.06);
  --shadow-pop:  0 18px 48px rgba(14,13,12,0.14);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---- Type ---- */
  --font-display: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;
  --tracking-tight: -0.025em;
  --tracking-cap: 0.16em;

  /* ---- Layout ---- */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 520ms;
}