/* ============================================================
   Citara — Foundations
   Royal blue, cool navy neutrals, teal + amber accents.
   Modern and easy · calm tech · professional wellness.
   Palette source: "Paleta de colores" — #2D5BE3 / #1B2A4A /
   #EAF1FD / #F4F7FA / #5EC4A8 / #F5A623.
   Typeface: Sora (single family) + system sans fallback.
   ============================================================ */

/* ---------- Font — Sora (variable, single family) ---------- */
@font-face {
  font-family: "Sora";
  src: url("../fonts/Sora-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     COLOR — Raw scales
     ============================================================ */

  /* Sky — primary brand blue. Vivid, confident royal blue (#2D5BE3). */
  --sky-50:  #EAF1FD;   /* "fondos · suavidad" */
  --sky-100: #D6E2FC;
  --sky-200: #B3C8F9;
  --sky-300: #7E9DF2;
  --sky-400: #5076EA;
  --sky-500: #2D5BE3;   /* primary · "color principal" */
  --sky-600: #1F47C4;
  --sky-700: #1B3A9E;
  --sky-800: #1B2F7A;
  --sky-900: #16245A;

  /* Stone — cool blue-gray neutrals. Backgrounds, borders, text → navy. */
  --stone-50:  #F4F7FA;   /* app canvas · "color principal" light */
  --stone-100: #EDF1F6;
  --stone-200: #E2E8F0;
  --stone-300: #C9D2DF;
  --stone-400: #9BA7BC;
  --stone-500: #707E96;
  --stone-600: #4B5871;
  --stone-700: #2C3A57;
  --stone-800: #1B2A4A;   /* primary text · "textos · seriedad" */
  --stone-900: #131E38;

  /* Sand — warm gold accent. Premium markers, upgrade surfaces. */
  --sand-50:  #FBF3E2;
  --sand-100: #F6E4BF;
  --sand-200: #EFD08A;
  --sand-300: #E6B65A;
  --sand-400: #D99C2E;
  --sand-500: #C0851C;
  --sand-600: #94660F;

  /* Sage — teal success / fresh secondary (#5EC4A8). */
  --sage-50:  #ECF8F4;
  --sage-100: #D2EEE6;
  --sage-300: #93D8C4;
  --sage-500: #5EC4A8;
  --sage-700: #2C7D66;

  /* Amber — warning / novelty · urgency (#F5A623). */
  --amber-50:  #FEF6E7;
  --amber-100: #FCE8BE;
  --amber-300: #F8C969;
  --amber-500: #F5A623;
  --amber-700: #B97608;

  /* Coral — danger (warm red, harmonized with palette). */
  --coral-50:  #FDEEEC;
  --coral-100: #FAD3CD;
  --coral-300: #F09A8C;
  --coral-500: #E25C48;
  --coral-700: #A8331F;

  /* Pure */
  --white: #FFFFFF;
  --black: #0E1426;

  /* ============================================================
     COLOR — Semantic tokens
     ============================================================ */

  /* Surfaces (light theme) */
  --bg-app:        var(--stone-50);     /* app/canvas background */
  --bg-surface:    var(--white);        /* cards, panels */
  --bg-sunken:     var(--stone-100);    /* recessed sections */
  --bg-muted:      var(--stone-200);    /* chips, subtle fills */
  --bg-tinted:     var(--sky-50);       /* tinted brand surface */
  --bg-warm:       var(--sand-50);      /* warm tinted surface */
  --bg-overlay:    rgba(19, 30, 56, 0.40); /* scrim — navy */

  /* Text */
  --fg:            var(--stone-800);    /* primary text */
  --fg-strong:     var(--stone-900);    /* headlines */
  --fg-muted:      var(--stone-600);    /* secondary text */
  --fg-subtle:     var(--stone-500);    /* tertiary text, captions */
  --fg-faint:      var(--stone-400);    /* placeholders, disabled */
  --fg-on-brand:   var(--white);        /* text on primary */
  --fg-on-dark:    var(--stone-50);

  /* Borders & dividers */
  --border-subtle: var(--stone-200);
  --border:        var(--stone-300);
  --border-strong: var(--stone-400);
  --border-focus:  var(--sky-500);

  /* Brand */
  --brand:         var(--sky-500);
  --brand-hover:   var(--sky-600);
  --brand-press:   var(--sky-700);
  --brand-tint:    var(--sky-50);
  --brand-soft:    var(--sky-100);

  /* Accent (sand) */
  --accent:        var(--sand-400);
  --accent-tint:   var(--sand-50);

  /* Status */
  --success:       var(--sage-500);
  --success-tint:  var(--sage-50);
  --warning:       var(--amber-500);
  --warning-tint:  var(--amber-50);
  --danger:        var(--coral-500);
  --danger-tint:   var(--coral-50);
  --info:          var(--sky-500);
  --info-tint:     var(--sky-50);

  /* ============================================================
     TYPOGRAPHY
     Single typeface: Sora (variable, 100–800).
     Display & UI & numeric all set in Sora; classic sans fallback.
     ============================================================ */

  --font-display: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-sans:    "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Type scale (1.125 minor third, tuned) */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-md:  14px;   /* body default */
  --text-base:15px;
  --text-lg:  17px;
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;
  --text-5xl: 48px;
  --text-6xl: 62px;

  /* Line heights */
  --lh-tight:   1.1;   /* @kind other */
  --lh-snug:    1.25;  /* @kind other */
  --lh-normal:  1.5;   /* @kind other */
  --lh-relaxed: 1.65;  /* @kind other */

  /* Weights */
  --w-regular: 400;  /* @kind font */
  --w-medium:  500;  /* @kind font */
  --w-semi:    600;  /* @kind font */
  --w-bold:    700;  /* @kind font */

  /* Tracking */
  --tr-tight:   -0.02em;
  --tr-snug:    -0.01em;
  --tr-normal:  0em;
  --tr-wide:    0.04em;
  --tr-eyebrow: 0.12em;

  /* ============================================================
     SPACING — 4px grid
     ============================================================ */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;

  /* ============================================================
     RADII — soft, rounded
     ============================================================ */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ============================================================
     SHADOWS — soft floating elevation, never dark/dense
     ============================================================ */
  --shadow-xs:
    0 1px 2px rgba(19, 30, 56, 0.05),
    0 1px 1px rgba(19, 30, 56, 0.04);

  --shadow-sm:
    0 1px 2px rgba(19, 30, 56, 0.05),
    0 2px 6px rgba(19, 30, 56, 0.06);

  --shadow-md:
    0 2px 4px rgba(19, 30, 56, 0.05),
    0 8px 20px rgba(19, 30, 56, 0.07);

  --shadow-lg:
    0 4px 8px rgba(19, 30, 56, 0.05),
    0 18px 40px rgba(19, 30, 56, 0.10);

  --shadow-xl:
    0 6px 16px rgba(19, 30, 56, 0.06),
    0 30px 60px rgba(19, 30, 56, 0.12);

  /* Focus ring — accessible & on-brand */
  --ring-focus: 0 0 0 4px rgba(45, 91, 227, 0.24);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);     /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:    140ms;  /* @kind other */
  --dur-base:    220ms;  /* @kind other */
  --dur-slow:    360ms;  /* @kind other */

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1440px;
  --sidebar-w:    256px;
  --topbar-h:     64px;
}

/* ============================================================
   SEMANTIC TYPE — apply these classes for consistent type.
   ============================================================ */

.t-display-lg {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-weight: var(--w-bold);
  color: var(--fg-strong);
}
.t-display {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-weight: var(--w-bold);
  color: var(--fg-strong);
}
.t-h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-weight: var(--w-bold);
  color: var(--fg-strong);
}
.t-h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  font-weight: var(--w-semi);
  color: var(--fg-strong);
}
.t-h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  font-weight: var(--w-semi);
  color: var(--fg-strong);
}
.t-h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  font-weight: var(--w-semi);
  color: var(--fg-strong);
}
.t-h5 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  font-weight: var(--w-semi);
  color: var(--fg-strong);
}
.t-lede {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  font-weight: var(--w-regular);
}
.t-body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  font-weight: var(--w-regular);
}
.t-body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg);
}
.t-caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
  color: var(--fg-subtle);
}
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--fg-muted);
}
.t-numeric {
  font-family: var(--font-mono);
  font-feature-settings: "tnum", "lnum";
  letter-spacing: var(--tr-snug);
}

/* Reset-ish base */
html, body {
  background: var(--bg-app);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: border-box; }