/* Younium Design System — Colors & Type
 * Source of truth: brand style guide + palette screenshot + Cairo type spec.
 * Import this file at the root of any prototype.
 */

/* ---------- Font: Cairo (local variable font) ---------- */
@font-face {
  font-family: 'Cairo';
  src: url('fonts/Cairo-VariableFont_slnt_wght.ttf') format('truetype-variations'),
       url('fonts/Cairo-VariableFont_slnt_wght.ttf') format('truetype');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
/* Mono (code/data tables) — still CDN */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* =======================================================
     COLOR — PRIMARY (per official palette)
     ======================================================= */
  --yn-dark-blue:    #112134;   /* Primary — headings, nav, brand surfaces */
  --yn-turquoise:    #54b6be;   /* Primary — brand accent / CTAs secondary */
  --yn-blue:         #479acf;   /* Primary — links, primary CTA */

  /* =======================================================
     COLOR — SECONDARY
     ======================================================= */
  --yn-grey:         #eeeeee;   /* Secondary — surface / dividers */
  --yn-yellow:       #f1bb3e;   /* Secondary — highlights, warnings, logo accent */
  --yn-red:          #d95e51;   /* Secondary — destructive, negative delta, logo accent */
  --yn-pink:         #f4a2a7;   /* Secondary — soft highlights, badges */

  /* =======================================================
     COLOR — EXTENDED NEUTRALS (derived)
     ======================================================= */
  --yn-white:        #ffffff;
  --yn-off-white:    #f7f8fa;
  --yn-grey-50:      #f4f5f7;
  --yn-grey-100:     #eeeeee;
  --yn-grey-200:     #e2e4e8;
  --yn-grey-300:     #c9cdd3;
  --yn-grey-400:     #9aa1ab;
  --yn-grey-500:     #6b7280;
  --yn-grey-600:     #4b5563;
  --yn-grey-700:     #2f3a4a;
  --yn-grey-800:     #1c2736;
  --yn-grey-900:     #112134; /* = dark blue */

  /* Tints of the primaries (useful for backgrounds, hovers) */
  --yn-blue-50:      #eaf4fb;
  --yn-blue-100:     #cfe4f4;
  --yn-blue-600:     #3886b9;
  --yn-blue-700:     #2b6e9b;
  --yn-turquoise-50: #e6f4f5;
  --yn-turquoise-100:#c7e6e8;
  --yn-turquoise-600:#3ea0a8;
  --yn-turquoise-700:#2e8289;
  --yn-yellow-50:    #fdf5dd;
  --yn-red-50:       #fbe9e7;

  /* =======================================================
     BRAND GRADIENTS (from official style guide)
     Core identity element — use on hero surfaces, cards, CTAs.
     HIERARCHY:
       PRIMARY  → --grad-dark-turquoise  (default brand gradient — use first)
       OCCASIONAL → --grad-dark-blue     (alt accent — use sparingly)
       ACCENT   → --grad-dark-red, --grad-white-* (rare, decorative only)
     ======================================================= */
  --grad-dark-turquoise: linear-gradient(180deg, #112134 0%, #54b6be 100%);  /* PRIMARY */
  --grad-dark-blue:      linear-gradient(180deg, #112134 0%, #479acf 100%);  /* occasional */
  --grad-dark-red:       linear-gradient(180deg, #112134 0%, #d95e51 100%);
  --grad-white-turquoise: linear-gradient(180deg, #ffffff 0%, #54b6be 100%);
  --grad-white-yellow:    linear-gradient(180deg, #ffffff 0%, #f1bb3e 100%);
  --grad-white-blue:      linear-gradient(180deg, #ffffff 0%, #479acf 100%);

  /* =======================================================
     SEMANTIC TOKENS
     ======================================================= */
  /* Foreground */
  --fg-1: var(--yn-dark-blue);          /* primary text, headings */
  --fg-2: var(--yn-grey-700);           /* body text */
  --fg-3: var(--yn-grey-500);           /* muted, captions */
  --fg-4: var(--yn-grey-400);           /* placeholder */
  --fg-inverse: var(--yn-white);

  /* Background / surface */
  --bg-app:      var(--yn-off-white);
  --bg-surface:  var(--yn-white);
  --bg-sunken:   var(--yn-grey-50);
  --bg-muted:    var(--yn-grey-100);
  --bg-brand:    var(--yn-dark-blue);
  --bg-accent:   var(--yn-blue);

  /* Borders */
  --border-1: var(--yn-grey-200);
  --border-2: var(--yn-grey-300);
  --border-strong: var(--yn-grey-700);

  /* Intent colors */
  --intent-primary:   var(--yn-blue);
  --intent-primary-hover: var(--yn-blue-600);
  --intent-success:   #3fa775;        /* derived, not in base palette */
  --intent-warning:   var(--yn-yellow);
  --intent-danger:    var(--yn-red);
  --intent-info:      var(--yn-turquoise);

  /* Focus ring */
  --ring: 0 0 0 3px rgba(71, 154, 207, 0.35);

  /* =======================================================
     TYPE — FAMILIES
     ======================================================= */
  --font-sans: 'Cairo', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Cairo', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* =======================================================
     TYPE — SCALE (fluid-safe, 16px base)
     ======================================================= */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  36px;
  --fs-4xl:  48px;
  --fs-5xl:  60px;
  --fs-6xl:  72px;

  /* Weights (Cairo shines at 600–800 for display) */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-xbold: 800;
  --fw-black: 900;

  /* Line heights */
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.08em;   /* used for uppercase eyebrows */

  /* =======================================================
     SPACING (4px baseline)
     ======================================================= */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* =======================================================
     RADIUS
     ======================================================= */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* =======================================================
     SHADOWS (soft, low-saturation — matches modern SaaS UI)
     ======================================================= */
  --shadow-xs: 0 1px 2px rgba(17, 33, 52, 0.06);
  --shadow-sm: 0 1px 3px rgba(17, 33, 52, 0.08), 0 1px 2px rgba(17, 33, 52, 0.04);
  --shadow-md: 0 4px 12px rgba(17, 33, 52, 0.08), 0 2px 4px rgba(17, 33, 52, 0.04);
  --shadow-lg: 0 12px 28px rgba(17, 33, 52, 0.12), 0 4px 10px rgba(17, 33, 52, 0.06);
  --shadow-xl: 0 24px 48px rgba(17, 33, 52, 0.18);

  /* =======================================================
     MOTION
     ======================================================= */
  --ease-standard: cubic-bezier(0.2, 0.0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.0, 0, 1.1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* ---------- Base / element styles ---------- */

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--fg-1);
  background: var(--bg-app);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-xbold);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}
h3, .h3 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}
h4, .h4 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}
h5, .h5 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}
h6, .h6 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
}
p, .body {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}
.body-sm { font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--fg-2); }
.caption { font-size: var(--fs-xs); line-height: var(--lh-normal); color: var(--fg-3); }
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--yn-blue);
}
.lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  font-weight: var(--fw-regular);
}

a {
  color: var(--intent-primary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--intent-primary-hover); }

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  background: var(--bg-muted);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--fg-1);
}

hr {
  border: 0;
  border-top: 1px solid var(--border-1);
  margin: var(--space-6) 0;
}

::selection {
  background: var(--yn-turquoise-100);
  color: var(--yn-dark-blue);
}