/* Nural Design System v1.0 — Colors & Type tokens
   Source: Nural Design System Figma (v1.0). Values verified against
   /Design-Foundations/Color and /Design-Foundations/Frame-361308 (Typography). */

@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url("fonts/WorkSans-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ─── BRAND ───────────────────────────────────────────── */
  /* Primary — deep blue (Nural's anchor color, 50:73:159 in Figma) */
  --nural-primary-100: #f1f3fb;
  --nural-primary-200: #e2e7f6;
  --nural-primary-300: #c6ceed;
  --nural-primary-400: #8d9edb;
  --nural-primary-500: #32499f;    /* default */
  --nural-primary-600: #23346f;
  --nural-primary-700: #18244e;
  --nural-primary-800: #111937;
  --nural-primary-900: #0c1226;

  /* Secondary — cyan (brand accent, from the logo diagonal) */
  --nural-secondary-100: #edfeff;
  --nural-secondary-200: #dbfefe;
  --nural-secondary-300: #b7fcfd;
  --nural-secondary-400: #6ff9fc;
  --nural-secondary-500: #05cfd3;  /* default */
  --nural-secondary-600: #039194;
  --nural-secondary-700: #026668;
  --nural-secondary-800: #024748;
  --nural-secondary-900: #013233;

  /* ─── NEUTRALS ────────────────────────────────────────── */
  --nural-white:        #ffffff;
  --nural-neutral-100:  #f8f9fd;   /* page background */
  --nural-neutral-200:  #dfddde;
  --nural-neutral-300:  #b9b2b4;
  --nural-neutral-400:  #383334;
  --nural-neutral-black:#231f20;   /* Base black */
  --nural-black-true:   #000000;

  /* ─── FUNCTIONAL ──────────────────────────────────────── */
  --nural-red-500:      #e63639;
  --nural-red-700:      #8a282a;
  --nural-red-200:      #f1b9ba;
  --nural-green-500:    #026668;   /* "success" maps to secondary-700 in system */
  --nural-pink-500:     #e8178a;   /* accent / alert accent */
  --nural-purple-500:   #9747ff;   /* developer / annotation only */

  /* ─── TEXT ────────────────────────────────────────────── */
  --nural-fg-1:         var(--nural-primary-700);   /* primary text */
  --nural-fg-2:         var(--nural-primary-500);   /* secondary / links */
  --nural-fg-3:         var(--nural-neutral-400);   /* muted body */
  --nural-fg-muted:     #7f7f7f;                    /* caption grey */
  --nural-fg-on-dark:   var(--nural-neutral-100);
  --nural-fg-inverse:   #ffffff;

  /* ─── SURFACES ────────────────────────────────────────── */
  --nural-bg-page:      var(--nural-neutral-100);
  --nural-bg-card:      #ffffff;
  --nural-bg-subtle:    var(--nural-primary-100);
  --nural-bg-dark:      var(--nural-primary-700);
  --nural-bg-on-primary:var(--nural-primary-500);
  --nural-bg-field:     var(--nural-neutral-100);

  /* ─── BORDERS ─────────────────────────────────────────── */
  --nural-border-subtle: rgba(0,0,0,0.1);
  --nural-border-1:      var(--nural-primary-200);
  --nural-border-2:      var(--nural-primary-300);
  --nural-border-strong: var(--nural-primary-500);

  /* ─── SHADOWS / EFFECTS ──────────────────────────────── */
  --nural-shadow-card:    0 3px 50px 0 rgba(0,0,0,0.07);
  --nural-shadow-sm:      0 1px 2px 0 rgba(12,18,38,0.06);
  --nural-shadow-md:      0 4px 12px 0 rgba(12,18,38,0.08);
  --nural-shadow-lg:      0 12px 32px 0 rgba(12,18,38,0.10);
  --nural-blur-default:   blur(8px);
  --nural-blur-xl:        blur(32px);

  /* ─── RADIUS ──────────────────────────────────────────── */
  --nural-radius-s:    4px;
  --nural-radius-m:    8px;
  --nural-radius-l:    16px;
  --nural-radius-xl:   40px;
  --nural-radius-full: 999px;

  /* ─── STROKE ──────────────────────────────────────────── */
  --nural-stroke-s: 1px;
  --nural-stroke-m: 2px;

  /* ─── SPACING (8-pt grid, with 4pt sub-step) ─────────── */
  --nural-space-sm: 4px;
  --nural-space-md: 8px;
  --nural-space-lg: 16px;
  --nural-space-xl: 80px;

  /* ─── TYPOGRAPHY FAMILIES ────────────────────────────── */
  --nural-font-display: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --nural-font-body:    "Work Sans", ui-sans-serif, system-ui, sans-serif;
  --nural-font-mono:    "Roboto Mono", ui-monospace, Menlo, monospace;

  /* ─── SEMANTIC TYPE ROLES ────────────────────────────── */
  /* display-lg — page hero */
  --nural-display-lg-family: var(--nural-font-display);
  --nural-display-lg-weight: 400;
  --nural-display-lg-size:   32px;
  --nural-display-lg-lh:     32px;

  /* display-md — secondary hero */
  --nural-display-md-size:   24px;
  --nural-display-md-lh:     24px;

  /* title (Manrope/title) — card / section titles */
  --nural-title-size:   24px;
  --nural-title-lh:     24px;

  /* H1 — 18px */
  --nural-h1-size: 18px;
  --nural-h1-lh:   18px;

  /* H2 — 16px */
  --nural-h2-size: 16px;
  --nural-h2-lh:   16px;

  /* H3 — 12px (tab / sidebar) */
  --nural-h3-size: 12px;
  --nural-h3-lh:   12px;

  /* body — Work Sans 12/16 */
  --nural-body-family: var(--nural-font-body);
  --nural-body-size:   12px;
  --nural-body-lh:     16px;

  /* button lg/sm */
  --nural-btn-lg-size: 16px;
  --nural-btn-lg-lh:   16px;
  --nural-btn-sm-size: 12px;
  --nural-btn-sm-lh:   12px;

  /* labels (Manrope) */
  --nural-label-lg-size: 10px;
  --nural-label-lg-lh:   10px;
  --nural-label-sm-size: 8px;
  --nural-label-sm-lh:   8px;

  /* table-data (Work Sans) */
  --nural-table-size: 10px;
  --nural-table-lh:   16px;

  /* widget header */
  --nural-widget-header-size: 10px;
  --nural-widget-header-lh:   10px;
}

/* ─── ELEMENT DEFAULTS ───────────────────────────────── */
html { color: var(--nural-fg-1); background: var(--nural-bg-page); }
body {
  margin: 0;
  font-family: var(--nural-body-family);
  font-size: var(--nural-body-size);
  line-height: var(--nural-body-lh);
  color: var(--nural-fg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--nural-font-display);
  color: var(--nural-fg-1);
  margin: 0;
  letter-spacing: 0;
}
h1 { font-size: var(--nural-display-lg-size); line-height: var(--nural-display-lg-lh); font-weight: 700; }
h2 { font-size: var(--nural-display-md-size); line-height: var(--nural-display-md-lh); font-weight: 700; }
h3 { font-size: var(--nural-title-size);      line-height: var(--nural-title-lh);      font-weight: 700; }
h4 { font-size: var(--nural-h1-size);         line-height: var(--nural-h1-lh);         font-weight: 700; }
h5 { font-size: var(--nural-h2-size);         line-height: var(--nural-h2-lh);         font-weight: 700; }
h6 { font-size: var(--nural-h3-size);         line-height: var(--nural-h3-lh);         font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

p, li { font-family: var(--nural-body-family); font-size: var(--nural-body-size); line-height: var(--nural-body-lh); color: var(--nural-fg-3); }

a { color: var(--nural-primary-500); text-decoration: none; }
a:hover { color: var(--nural-primary-700); }

code, pre, kbd, samp {
  font-family: var(--nural-font-mono);
  font-size: 12px;
}

small, .caption {
  font-family: var(--nural-font-display);
  font-size: var(--nural-label-lg-size);
  line-height: var(--nural-label-lg-lh);
  color: var(--nural-fg-muted);
  font-weight: 700;
  letter-spacing: .02em;
}

/* utility class helpers */
.nural-card {
  background: var(--nural-bg-card);
  border-radius: var(--nural-radius-l);
  box-shadow: var(--nural-shadow-card);
  padding: 20px;
}
.nural-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--nural-radius-full);
  font-family: var(--nural-font-display);
  font-weight: 700; font-size: 10px; line-height: 10px;
}