/* ==========================================================================
   ARRELUNA — Design Tokens
   ========================================================================== */

/* ── Local fonts ── */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-v20-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-v20-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-v20-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-v20-latin-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-v20-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-v20-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-v20-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-v24-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-v24-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Font alias for code elements */
:root {
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;
}

:root {
  /* -----------------------------------------------------------------------
     BRAND PALETTE — Arreluna
     ----------------------------------------------------------------------- */
  --arl-deep-teal:        #0a4759;
  --arl-deep-teal-soft:   rgba(10, 71, 89, 0.06);
  --arl-deep-teal-dark:   #072e3a;
  --arl-bright-cyan:      #1b9aa3;
  --arl-moon-sand:        #f4f1ea;
  --arl-moon-sand-light:  #faf8f3;
  --arl-slate-ink:        #1f2e35;
  --arl-luna-accent:      #8e7cc3;
  --arl-luna-accent-soft: rgba(142, 124, 195, 0.12);
  --arl-soft-gold:        #c9a24a;
  --arl-border:           #d8e0e4;
  --arl-white:            #ffffff;

  /* Tonal steps */
  --arl-cyan-100:         #d3ecee;
  --arl-cyan-50:          #eaf6f7;
  --arl-accent-100:       #e2dfec;

  /* Back-compat aliases — keep existing --eln-* working in legacy CSS */
  --eln-midnight:      var(--arl-deep-teal);
  --eln-cyan:          var(--arl-bright-cyan);
  --eln-gray:          var(--arl-luna-accent);
  --eln-magenta:       var(--arl-luna-accent);  /* replaced by luna-accent */
  --eln-gold:          var(--arl-soft-gold);
  --eln-teal-dark:     var(--arl-deep-teal);
  --eln-teal:          var(--arl-bright-cyan);
  --eln-lavender:      var(--arl-luna-accent);
  --eln-pink:          var(--arl-luna-accent);  /* replaced by luna-accent */
  --eln-teal-dark-700: #083a4a;
  --eln-teal-dark-900: #052831;
  --eln-teal-100:      var(--arl-cyan-100);
  --eln-teal-50:       var(--arl-cyan-50);
  --eln-lavender-100:  var(--arl-accent-100);
  --eln-ink:           var(--arl-slate-ink);
  --eln-ink-soft:      #3a5b68;
  --eln-muted:         #6b7b83;
  --eln-line:          var(--arl-border);
  --eln-surface:       var(--arl-white);
  --eln-surface-alt:   var(--arl-moon-sand-light);
  --eln-paper:         var(--arl-moon-sand);

  /* Semantic mappings ----------------------------------------------------- */
  --fg-1:       var(--arl-slate-ink);
  --fg-2:       #3a5b68;
  --fg-3:       #6b7b83;
  --fg-accent:  var(--arl-luna-accent);
  --fg-brand:   var(--arl-bright-cyan);

  --bg-1:       var(--arl-white);
  --bg-2:       var(--arl-moon-sand-light);
  --bg-paper:   var(--arl-moon-sand);
  --bg-ink:     var(--arl-deep-teal-dark);
  --bg-accent:  var(--arl-luna-accent);

  --border-1:   var(--arl-border);
  --border-2:   #c8d4d9;

  /* Status */
  --success:    #2fa08a;
  --warning:    var(--arl-soft-gold);
  --danger:     #d14a6a;
  --info:       var(--arl-bright-cyan);

  /* -----------------------------------------------------------------------
     TYPOGRAPHY — Manrope (headings) + Inter (body)
     ----------------------------------------------------------------------- */
  --font-display: 'Manrope', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Menlo', monospace;

  /* Type scale */
  --fs-display: clamp(2.75rem, 6vw, 4.5rem);
  --fs-h1:      clamp(2.75rem, 6vw, 4.5rem);
  --fs-h2:      clamp(1.8rem, 3.5vw, 2.5rem);
  --fs-h3:      clamp(1.4rem, 2vw, 1.75rem);
  --fs-h4:      1.25rem;
  --fs-h5:      1.0625rem;
  --fs-h6:      0.9375rem;
  --fs-body:    1.125rem;
  --fs-small:   0.96875rem;
  --fs-micro:   0.8125rem;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-body:    1.7;
  --lh-loose:   1.75;

  --ls-tight:   -0.02em;
  --ls-caps:    0.1em;

  /* -----------------------------------------------------------------------
     SPACING — 4px base
     ----------------------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* -----------------------------------------------------------------------
     RADII
     ----------------------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  40px;
  --radius-pill: 999px;

  /* -----------------------------------------------------------------------
     SHADOWS
     ----------------------------------------------------------------------- */
  --shadow-xs:    0 1px 2px rgba(10, 71, 89, 0.04);
  --shadow-sm:    0 1px 2px rgba(10, 71, 89, 0.04);
  --shadow-md:    0 4px 16px rgba(10, 71, 89, 0.06);
  --shadow-lg:    0 12px 40px rgba(10, 71, 89, 0.10);
  --shadow-inset: inset 0 0 0 1px rgba(10, 71, 89, 0.08);

  /* Motion */
  --ease-out:  cubic-bezier(.2, .8, .2, 1);
  --ease-in:   cubic-bezier(.5, 0, .75, 0);
  --dur-fast:  140ms;
  --dur:       200ms;
  --dur-slow:  360ms;
}