/* ── Niriis Design System tokens · generated from design bundle ── */
/* ── Niriis webfonts ──────────────────────────────────────────────
   "Quiet Luxury" type system — unified on a single Greek-capable serif:

   • Source Serif 4 — the entire system (display + body + UI).
     Adobe's text serif: full GREEK + Latin + Cyrillic, weights 200–900
     with italics. One consistent letterform across Greek and English.
   • IBM Plex Mono — retained ONLY for tabular figures, program codes
     and deadlines (alignment in finance contexts). Source Serif 4 is
     proportional, so a true monospace role still needs Plex Mono.
     To go truly single-font, point --font-mono at Source Serif 4 too
     and rely on font-feature-settings:'tnum'.

   Greek glyphs are delivered automatically by the CSS2 API via
   unicode-range. ─────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,500&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ══════════════════════════════════════════════════════════════════
   NIRIIS · COLOR TOKENS
   "Quiet Luxury" — Deep Petrol Blue · Warm Alabaster · Brushed Silver,
   with a vibrant Cobalt "Call-to-Focus" and soft Baby-Blue highlights.
   No gold. Paper-like, institutional, discreet.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Petrol / blue ramp (deep authority → baby-blue highlight) ──── */
  /* (named --aegean-* for continuity; this is the petrol-blue scale)  */
  --aegean-900: #001726;   /* deepest petrol — primary ink */
  --aegean-800: #04263b;
  --aegean-700: #0d2c40;   /* deep petrol — brand surfaces */
  --aegean-600: #14384f;
  --aegean-500: #2e4a5f;   /* muted petrol — eyebrows/labels */
  --aegean-400: #466178;   /* surface-tint petrol */
  --aegean-300: #7894ac;   /* dusty blue */
  --aegean-200: #adcae4;   /* BABY BLUE — the highlight */
  --aegean-100: #cae6ff;   /* baby blue, light */
  --aegean-50:  #eef3f9;   /* faintest blue tint */

  /* Ink — deepest petrol for type & dark surfaces (not pure black) */
  --ink-900: #001726;
  --ink-800: #0d2c40;
  --ink-700: #14384f;
  --ink-600: #2e4a5f;

  /* Cobalt — "Call-to-Focus" — vibrant, used sparingly (CTAs, links, focus) */
  --cobalt-700: #003a8c;
  --cobalt-600: #0047ab;   /* call-to-focus blue */
  --cobalt-500: #1f5ec4;
  --cobalt-200: #b6cdf0;
  --cobalt-100: #dbe7fb;

  /* Brushed-silver / warm-alabaster neutrals (warm grey, paper-like) */
  --slate-900: #1a1c1b;    /* on-surface ink */
  --slate-800: #2f3130;    /* inverse-surface */
  --slate-700: #42474c;    /* on-surface-variant */
  --slate-600: #5d5e5f;    /* secondary text */
  --slate-500: #73777d;    /* outline */
  --slate-400: #9a9ea3;
  --slate-300: #c3c7cd;    /* outline-variant — hairline */
  --slate-200: #e3e2e0;    /* container border */
  --slate-100: #efeeec;    /* container */
  --slate-50:  #f4f3f1;    /* container-low */
  --paper:     #faf9f7;    /* warm alabaster background */
  --alabaster: #f9f8f6;
  --silver:    #c0c0c0;    /* brushed silver — hallmark accents */
  --white:     #ffffff;

  /* ── Semantic — feedback (muted, institutional) ───────────────── */
  --green-600: #2f6b4f;    /* success */
  --green-500: #3a7d5e;
  --green-100: #e2ede7;
  --amber-600: #8a5a1d;    /* warning — sienna, never gold */
  --amber-500: #a06a24;
  --amber-100: #f1e4d5;
  --terra-600: #ba1a1a;    /* danger — the brand error red */
  --terra-500: #cf3b30;
  --terra-100: #ffdad6;

  /* ══════════════════════════════════════════════════════════════
     SEMANTIC ALIASES — reference these in components, not primitives
     ══════════════════════════════════════════════════════════════ */

  /* Text */
  --text-strong:    #1a1c1b;
  --text-body:      #33383d;
  --text-muted:     #5d5e5f;
  --text-subtle:    #73777d;
  --text-on-dark:   #f1f1ef;
  --text-on-dark-muted: var(--aegean-200);
  --text-inverse:   var(--white);
  --text-link:      var(--cobalt-600);
  --text-link-hover:var(--cobalt-700);
  --text-eyebrow:   var(--aegean-500);

  /* Surfaces */
  --surface-page:     var(--paper);
  --surface-card:     var(--white);
  --surface-sunken:   var(--slate-50);
  --surface-raised:   var(--white);
  --surface-tint:     var(--aegean-50);
  --surface-dark:     var(--ink-800);
  --surface-dark-alt: var(--ink-900);

  /* Borders & lines */
  --border-subtle:  var(--slate-200);
  --border-default: var(--slate-300);
  --border-strong:  var(--slate-400);
  --border-dark:    var(--ink-700);
  --divider:        var(--slate-200);
  --glass-border:   rgba(192, 192, 192, 0.30);
  --focus-ring:     var(--cobalt-600);

  /* Brand action — Deep Petrol */
  --brand:          var(--aegean-700);
  --brand-hover:    var(--aegean-800);
  --brand-active:   var(--aegean-900);
  --brand-soft:     var(--aegean-50);

  /* Accent — Cobalt Call-to-Focus (sparing) */
  --accent:         var(--cobalt-600);
  --accent-hover:   var(--cobalt-700);
  --accent-soft:    var(--cobalt-100);

  /* Highlight — Baby Blue (decorative rules, chips, soft emphasis) */
  --highlight:      var(--aegean-200);
  --highlight-soft: var(--aegean-100);

  /* Status */
  --status-success: var(--green-600);
  --status-success-soft: var(--green-100);
  --status-warning: var(--amber-600);
  --status-warning-soft: var(--amber-100);
  --status-danger:  var(--terra-600);
  --status-danger-soft: var(--terra-100);
  --status-info:    var(--cobalt-600);
  --status-info-soft: var(--cobalt-100);
}

/* ══════════════════════════════════════════════════════════════════
   NIRIIS · TYPOGRAPHY TOKENS
   Source Serif 4 (display + body + UI · full Greek) · IBM Plex Mono (figures)
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Families ─────────────────────────────────────────────────── */
  /* Unified on Source Serif 4 — full Greek; one face for display, body & UI */
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  /* ── Weights ──────────────────────────────────────────────────── */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ── Type scale (1.250 major-third, 16px base) ────────────────── */
  --text-2xs: 0.6875rem;  /* 11px — micro labels, legal */
  --text-xs:  0.75rem;    /* 12px — captions, meta */
  --text-sm:  0.875rem;   /* 14px — secondary, dense UI */
  --text-base:1rem;       /* 16px — body */
  --text-md:  1.125rem;   /* 18px — lead body */
  --text-lg:  1.375rem;   /* 22px — small headings */
  --text-xl:  1.75rem;    /* 28px — h4 / card titles */
  --text-2xl: 2.25rem;    /* 36px — h3 */
  --text-3xl: 3rem;       /* 48px — h2 */
  --text-4xl: 3.9375rem;  /* 63px — h1 */
  --text-5xl: 5rem;       /* 80px — hero display */

  /* ── Line heights (generous — preserve the "quiet" feel) ──────── */
  --leading-tight: 1.1;    /* display headlines */
  --leading-snug: 1.3;     /* headings */
  --leading-normal: 1.6;   /* body */
  --leading-relaxed: 1.7;  /* long-form prose */

  /* ── Letter spacing ───────────────────────────────────────────── */
  --tracking-tighter: -0.03em;  /* big display serif */
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.08em;     /* eyebrows / overlines */
  --tracking-widest: 0.18em;    /* all-caps labels */

  /* ── Composite roles ─────────────────────────────────────────── */
  --eyebrow-font: var(--font-sans);
  --eyebrow-size: var(--text-xs);
  --eyebrow-weight: var(--weight-semibold);
  --eyebrow-tracking: var(--tracking-widest);
}

/* ══════════════════════════════════════════════════════════════════
   NIRIIS · SPACING, RADII & LAYOUT TOKENS
   8px base grid. Restrained radii — institutional, not playful.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Spacing scale (8px grid, with 4px half-steps) ───────────── */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 2.5rem;   /* 40 */
  --space-8: 3rem;     /* 48 */
  --space-9: 4rem;     /* 64 */
  --space-10: 5rem;    /* 80 */
  --space-11: 6rem;    /* 96 */
  --space-12: 8rem;    /* 128 */

  /* ── Radii — tight & architectural ───────────────────────────── */
  --radius-xs: 2px;     /* 0.125rem */
  --radius-sm: 4px;     /* 0.25rem  — default; inputs, buttons, badges */
  --radius-md: 6px;     /* 0.375rem */
  --radius-lg: 8px;     /* 0.5rem   — bento cards, chips */
  --radius-xl: 12px;    /* 0.75rem  — large panels, modals */
  --radius-pill: 9999px;/* functional chips only — use sparingly */
  --radius-circle: 50%;

  /* ── Borders ─────────────────────────────────────────────────── */
  --border-width: 1px;
  --border-width-thick: 2px;
  --rule-accent: 3px;   /* baby-blue underline / highlight rule */

  /* ── Container widths ────────────────────────────────────────── */
  --container-sm: 640px;
  --container-md: 800px;   /* prose measure */
  --container-lg: 1080px;
  --container-xl: 1280px;
  --container-max: 1440px;
  --gutter: var(--space-5);

  /* ── Z-index scale ───────────────────────────────────────────── */
  --z-base: 1;      /* @kind other */
  --z-sticky: 100;  /* @kind other */
  --z-overlay: 1000;/* @kind other */
  --z-modal: 1100;  /* @kind other */
  --z-toast: 1200;  /* @kind other */
}

/* ══════════════════════════════════════════════════════════════════
   NIRIIS · ELEVATION, MOTION & EFFECT TOKENS
   Soft, low, cool-tinted shadows (navy-based, never pure black).
   Calm motion — no bounce. Confident fades & short slides.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Shadows (very diffused, low-opacity petrol tint — "Quiet") ─ */
  --shadow-xs: 0 1px 2px rgba(13, 44, 64, 0.04);
  --shadow-sm: 0 1px 3px rgba(13, 44, 64, 0.05);
  --shadow-md: 0 6px 20px rgba(13, 44, 64, 0.06);
  --shadow-lg: 0 14px 36px rgba(13, 44, 64, 0.08);
  --shadow-xl: 0 28px 64px rgba(13, 44, 64, 0.10);

  /* Inner shadow for sunken wells / inputs on dark */
  --shadow-inset: inset 0 1px 2px rgba(13, 44, 64, 0.06);

  /* Focus ring — crisp cobalt, NO glow (per Quiet-Luxury inputs) */
  --ring: 0 0 0 2px var(--surface-card), 0 0 0 4px rgba(0, 71, 171, 0.55);
  --ring-tight: 0 0 0 2px rgba(0, 71, 171, 0.55);

  /* ── Glassmorphism (nav bars, modal overlays) ────────────────── */
  --glass-bg: rgba(250, 249, 247, 0.72);
  --glass-bg-dark: rgba(13, 44, 64, 0.55);
  --glass-blur: blur(16px); /* @kind other */

  /* ── Motion ──────────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* @kind other */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);          /* @kind other */
  --duration-fast: 120ms;  /* @kind other */
  --duration-base: 200ms;  /* @kind other */
  --duration-slow: 320ms;  /* @kind other */
  --transition-base: all var(--duration-base) var(--ease-standard); /* @kind other */

  /* ── Misc ────────────────────────────────────────────────────── */
  --backdrop: rgba(0, 23, 38, 0.55);
  --backdrop-blur: blur(3px); /* @kind other */
}