/* ============================================================
   Swapps Design Tokens — CSS variables
   ============================================================
   Source: Velové brand manual + Claude AI design-system bundle.
   Mirrored in tokens.scss and tokens.json.

   Copy this stylesheet and its referenced ../fonts/ into the project.
   Load swapps-brand-tokens.css from the consuming CSS entrypoint.
   ------------------------------------------------------------ */

/* ---------- Webfonts ---------- */
/* Update url() paths to match where you bundle ../fonts/ */
@font-face {
  font-family: "Ofelia Display";
  src: url("../fonts/ofelia-display/OfeliaDisplay-Extralight.16e601577254.woff2") format("woff2");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Ofelia Display";
  src: url("../fonts/ofelia-display/OfeliaDisplay-Light.6a292873363c.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Ofelia Display";
  src: url("../fonts/ofelia-display/OfeliaDisplay-Regular.79bf3a1fdc3f.woff2") format("woff2"),
       url("../fonts/ofelia-display/OfeliaDisplay-Regular.5e06b9a74492.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Ofelia Display";
  src: url("../fonts/ofelia-display/OfeliaDisplay-Medium.aea41881451b.woff2") format("woff2"),
       url("../fonts/ofelia-display/OfeliaDisplay-Medium.325bfb49f4a1.woff") format("woff");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Ofelia Display";
  src: url("../fonts/ofelia-display/OfeliaDisplay-Bold.4d9097c8904d.woff2") format("woff2"),
       url("../fonts/ofelia-display/OfeliaDisplay-Bold.ddcf2a0e2389.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Ofelia Display";
  src: url("../fonts/ofelia-display/OfeliaDisplay-Extrabold.889b5b1f2c6e.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

@font-face {
  font-family: "Ofelia Text";
  src: url("../fonts/ofelia-text/OfeliaText-Regular.fd63b0e3967d.woff2") format("woff2"),
       url("../fonts/ofelia-text/OfeliaText-Regular.3f987cad0a9b.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Ofelia Text";
  src: url("../fonts/ofelia-text/OfeliaText-Italic.41748ce740f5.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Ofelia Text";
  src: url("../fonts/ofelia-text/OfeliaText-Medium.f08fcc836e8a.woff2") format("woff2"),
       url("../fonts/ofelia-text/OfeliaText-Medium.e1bf446e39e3.woff") format("woff");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Ofelia Text";
  src: url("../fonts/ofelia-text/OfeliaText-Semibold.0b394cbf77f3.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Ofelia Text";
  src: url("../fonts/ofelia-text/OfeliaText-Bold.490728f328f2.woff2") format("woff2"),
       url("../fonts/ofelia-text/OfeliaText-Bold.e68d2954640d.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Ofelia Text";
  src: url("../fonts/ofelia-text/OfeliaText-BoldItalic.2932c00aaf6d.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}

/* ---------- Color tokens ---------- */
:root {
  /* PRIMARY — the four brand "principales" */
  --swapps-ink:        #122D3F;
  --swapps-yellow:     #F0FF64;
  --swapps-cloud:      #F3F5F5;
  --swapps-mist:       #DAE1E6;

  /* SECONDARY — "consola de código" accents. Use sparingly. */
  --swapps-magenta:    #F15CFF;
  --swapps-cyan:       #00E1FF;
  --swapps-green:      #56DA00;
  --swapps-orange:     #F16100;

  /* INK ladder — derived from #122D3F for surfaces / opacities */
  --swapps-ink-900:    #0C293B;
  --swapps-ink-800:    #122D3F;
  --swapps-ink-600:    #71818C;
  --swapps-ink-400:    #B6C0C7;
  --swapps-ink-200:    #DAE1E6;
  --swapps-ink-100:    #F3F5F5;
  --swapps-paper:      #FFFFFF;

  /* SEMANTIC */
  --color-bg:          var(--swapps-paper);
  --color-surface:     var(--swapps-cloud);
  --color-surface-2:   var(--swapps-mist);
  --color-fg:          var(--swapps-ink);
  --color-fg-muted:    var(--swapps-ink-600);
  --color-border:      var(--swapps-mist);
  --color-accent:      var(--swapps-yellow);
  --color-link:        var(--swapps-ink);

  --color-success:     var(--swapps-green);
  --color-warning:     var(--swapps-orange);
  --color-info:        var(--swapps-cyan);
  --color-magenta:     var(--swapps-magenta);

  /* Dark scheme — flip surface + fg, accent stays yellow */
  --color-bg-dark:     var(--swapps-ink);
  --color-fg-dark:     var(--swapps-cloud);

  /* ---------- Typography ---------- */
  --font-display:      "Ofelia Display", "Inter", system-ui, sans-serif;
  --font-text:         "Ofelia Text", "Inter", system-ui, sans-serif;
  --font-mono:         "JetBrains Mono", "Fira Code", ui-monospace, monospace;

  /* Type scale — sourced from Figma frames (px) */
  --fs-hero:           90px;
  --fs-display-1:      80px;
  --fs-display-2:      64px;
  --fs-display-3:      40px;
  --fs-h1:             32px;
  --fs-h2:             26px;
  --fs-h3:             24px;
  --fs-h4:             18px;
  --fs-body:           16px;
  --fs-body-sm:        14px;
  --fs-caption:        12px;
  --fs-mini:           10px;

  --lh-tight:          1.0;
  --lh-snug:           1.2;
  --lh-normal:         1.5;
  --lh-relaxed:        1.71;

  --tracking-tight:    -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-caps:     0.08em;

  /* ---------- Layout & shape ---------- */
  --radius-sm:         5px;
  --radius-md:         15px;
  --radius-lg:         22px;
  --radius-pill:       29px;
  --radius-pill-lg:    42px;
  --radius-circle:     50%;

  --border-hair:       1px solid var(--swapps-mist);
  --border-rule:       1.5px solid var(--swapps-mist);

  --shadow-soft:       0 0 7px -2px rgb(18 45 63 / 0.18);
  --shadow-card:       0 8px 24px -12px rgb(18 45 63 / 0.18);
  --shadow-pop:        0 12px 32px -8px rgb(18 45 63 / 0.32);

  --space-1:           4px;
  --space-2:           8px;
  --space-3:           12px;
  --space-4:           16px;
  --space-5:           24px;
  --space-6:           32px;
  --space-7:           40px;
  --space-8:           50px;
  --space-9:           80px;

  --page-max:          1440px;
  --page-content:      950px;
  --page-pad:          80px;
}