/* ============================================================
   Citara — Foundations
   Soft blue, warm neutrals, sand accents.
   Calm tech, soft SaaS, professional wellness.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/PlusJakartaSans-VariableFont.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/PlusJakartaSans-Italic-VariableFont.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Italic-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/fonts/Manrope-VariableFont.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

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

  /* Sky — primary brand blue. Soft, calm, never saturated medical. */
  --sky-50:  #F2F6FE;
  --sky-100: #E3EBFC;
  --sky-200: #C6D6F8;
  --sky-300: #9DB8F0;
  --sky-400: #7497E6;
  --sky-500: #527BDC;   /* primary */
  --sky-600: #3D63C5;
  --sky-700: #2F4EA0;
  --sky-800: #283F7E;
  --sky-900: #1E2F5F;

  /* Warm Stone — neutrals. Slightly warm gray. Backgrounds, borders, text. */
  --stone-50:  #FAFAF7;
  --stone-100: #F4F3EE;
  --stone-200: #ECEAE3;
  --stone-300: #DCD9D0;
  --stone-400: #B5B1A6;
  --stone-500: #88857C;
  --stone-600: #5E5C55;
  --stone-700: #403F3A;
  --stone-800: #2A2A27;
  --stone-900: #1A1A18;

  /* Sand — warm earth accent for warmth + character */
  --sand-50:  #FBF7F0;
  --sand-100: #F5EDDC;
  --sand-200: #EDDDBA;
  --sand-300: #DDBE82;
  --sand-400: #C89F58;
  --sand-500: #A88248;
  --sand-600: #84663A;

  /* Sage — soft success (not hospital green) */
  --sage-50:  #F1F7F2;
  --sage-100: #DDEDE0;
  --sage-300: #9CCBA8;
  --sage-500: #5FA079;
  --sage-700: #3B6C53;

  /* Amber — warm warning */
  --amber-50:  #FDF6E8;
  --amber-100: #F9E7BD;
  --amber-300: #ECC273;
  --amber-500: #D69A40;
  --amber-700: #9A6E22;

  /* Coral — soft danger (warm, never alarming red) */
  --coral-50:  #FCEFEC;
  --coral-100: #F6D4CB;
  --coral-300: #E8A091;
  --coral-500: #D26F5C;
  --coral-700: #984232;

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

  /* ============================================================
     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(26, 26, 24, 0.32); /* scrim */

  /* 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
     Display: Plus Jakarta Sans (warm, geometric, friendly)
     UI/Body: Inter (workhorse, optical-size aware)
     Numeric/UI alt: Manrope (used for data, tabular numbers)
     ============================================================ */

  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Manrope", ui-monospace, "SF Mono", Menlo, monospace;

  /* 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;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

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

  /* 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(40, 50, 80, 0.04),
    0 1px 1px rgba(40, 50, 80, 0.03);

  --shadow-sm:
    0 1px 2px rgba(40, 50, 80, 0.04),
    0 2px 6px rgba(40, 50, 80, 0.05);

  --shadow-md:
    0 2px 4px rgba(40, 50, 80, 0.04),
    0 8px 20px rgba(40, 50, 80, 0.06);

  --shadow-lg:
    0 4px 8px rgba(40, 50, 80, 0.04),
    0 18px 40px rgba(40, 50, 80, 0.08);

  --shadow-xl:
    0 6px 16px rgba(40, 50, 80, 0.05),
    0 30px 60px rgba(40, 50, 80, 0.10);

  /* Focus ring — accessible & on-brand */
  --ring-focus: 0 0 0 4px rgba(82, 123, 220, 0.22);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);     /* gentle decel */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* smooth both */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* tiny overshoot */
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;

  /* ============================================================
     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; }