/* KymoMetrics website styles — brand tokens (flattened for standalone use) */

/* KymoMetrics webfonts — Inter (body/UI) + Outfit (display).
   These are the real fonts used across KymoMetrics products (see HF_assistant/src/index.css).
   Loaded from Google Fonts; @import targets are shipped to consumers. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800;900&display=swap');

/* ============================================================
   KymoMetrics — Color tokens
   Brand anchors: deep navy (logo field) + ultramarine (interactive)
   + kymograph orange (accent), on a cool slate neutral ramp.
   Values lifted from: the KymoMetrics logo, the marketing site
   (styles.css), the HF Assistant app (index.css / App.tsx), and
   the RWA desktop theme (gui/style.py).
   ============================================================ */
:root {
  /* --- Brand navy (logo field / darkest surfaces) --- */
  --navy-950: #000f24;   /* footer / ultra-dark base */
  --navy-900: #001a3c;   /* logo background — exact */
  --navy-850: #00122b;   /* section band */
  --navy-800: #00224f;   /* raised card on navy */

  /* --- Brand blue (ultramarine — primary interactive) --- */
  --blue-900: #000080;   /* nhs-dark-blue — hover/pressed, headings */
  --blue-700: #120a8f;   /* nhs-blue — PRIMARY action */
  --blue-600: #1e3aa8;   /* logo "Kymo" wordmark blue */
  --blue-500: #2b3c8e;   /* ultramarine banner (RWA) */
  --blue-400: #005eb8;   /* clinical/NHS data-viz blue */
  --blue-300: #41b6e6;   /* light accent blue */

  /* --- Kymograph orange (accent) --- */
  --orange-700: #d66a1a; /* pressed */
  --orange-600: #e06d00; /* hover */
  --orange-500: #f37d21; /* PRIMARY accent — logo waveform */
  --orange-400: #f57c00; /* action orange (RWA) */
  --orange-300: #ff8c00; /* bright brand orange (app) */

  /* --- Slate neutral ramp --- */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-150: #e9eef4;  /* app uses border-slate-150 */
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --white: #ffffff;

  /* --- Semantic status --- */
  --red-50:   #fef2f2;
  --red-100:  #fee2e2;
  --red-500:  #e11d48;   /* danger / critical (charts, alerts) */
  --red-600:  #dc2626;
  --red-700:  #b91c1c;
  --amber-50: #fff7ed;
  --amber-100:#ffedd5;
  --amber-500:#f59e0b;   /* borderline / caution */
  --amber-600:#ea580c;
  --green-50: #ecfdf5;
  --green-100:#d1fae5;
  --green-500:#10b981;   /* good / matched (charts, badges) */
  --green-600:#059669;

  /* ============================================================
     Semantic aliases — reach for these in components
     ============================================================ */
  /* Surfaces */
  --surface-page:    var(--slate-50);
  --surface-card:    var(--white);
  --surface-sunken:  var(--slate-50);
  --surface-inset:   var(--slate-100);
  --surface-navy:    var(--navy-900);
  --surface-navy-raised: var(--navy-800);

  /* Text */
  --text-heading:  var(--blue-900);   /* display headings */
  --text-body:     var(--slate-800);
  --text-muted:    var(--slate-500);
  --text-faint:    var(--slate-400);
  --text-on-navy:  var(--white);
  --text-on-brand: var(--white);

  /* Brand roles */
  --brand-primary:        var(--blue-700);
  --brand-primary-hover:  var(--blue-900);
  --brand-accent:         var(--orange-500);
  --brand-accent-hover:   var(--orange-600);

  /* Borders */
  --border-subtle:  var(--slate-100);
  --border-default: var(--slate-200);
  --border-strong:  var(--slate-300);
  --border-brand:   color-mix(in srgb, var(--blue-700) 40%, transparent);

  /* Focus ring */
  --ring-brand: color-mix(in srgb, var(--blue-700) 15%, transparent);

  /* Status roles */
  --status-danger:   var(--red-500);
  --status-caution:  var(--amber-500);
  --status-success:  var(--green-500);
  --status-info:     var(--blue-400);
}

/* ============================================================
   KymoMetrics — Typography tokens
   Display: Outfit (headings, wordmark, metrics).
   UI/body: Inter. Numeric/technical: ui-monospace stack.
   Type scale + label conventions mirror the HF Assistant app
   (uppercase micro-labels with wide tracking are a signature).
   ============================================================ */
:root {
  /* Families */
  --font-display: "Outfit", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* Font sizes (px-based scale used across the apps) */
  --text-2xs: 9px;    /* micro tags / provenance labels */
  --text-xs:  10px;   /* uppercase section labels */
  --text-sm:  12px;   /* dense UI text, table cells */
  --text-md:  14px;   /* default body */
  --text-base:16px;   /* comfortable body / inputs */
  --text-lg:  18px;
  --text-xl:  20px;   /* card / section titles */
  --text-2xl: 24px;   /* view titles */
  --text-3xl: 30px;
  --text-4xl: 36px;   /* hero / result numerals */
  --text-5xl: 48px;   /* marketing hero */

  /* Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-black:   900;   /* wordmark accents, emphatic numerals */

  /* Line heights */
  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-normal:1.5;
  --leading-relaxed:1.6;

  /* Letter spacing (uppercase labels lean wide) */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.08em;
  --tracking-widest: 0.14em;

  /* Semantic roles */
  --label-size: var(--text-xs);
  --label-weight: var(--weight-bold);
  --label-tracking: var(--tracking-widest);
}

/* ============================================================
   KymoMetrics — Spacing tokens
   4px base grid (Tailwind-derived — the apps are built on it).
   ============================================================ */
:root {
  --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;

  /* Common component paddings */
  --pad-input:   10px 14px;   /* p-2.5 feel */
  --pad-button:  12px 24px;
  --pad-card:    24px;        /* p-6 */
  --pad-section: 96px 10%;    /* marketing section rhythm */

  /* Container widths */
  --container-app:   72rem;   /* max-w-6xl main shell */
  --container-prose: 64rem;   /* max-w-5xl content */
  --container-card:  28rem;   /* max-w-md auth card */
}

/* ============================================================
   KymoMetrics — Radius, shadow & motion tokens
   Cards are generously rounded (16–24px); pills for chips/avatars.
   Shadows are soft and cool; the active tab carries a signature
   orange-tinted shadow. Motion is quick and calm (200–300ms).
   ============================================================ */
:root {
  /* Radii */
  --radius-xs:   5px;    /* marketing buttons */
  --radius-sm:   8px;    /* rounded-lg — inputs, small controls */
  --radius-md:   12px;   /* rounded-xl — buttons, pills of inputs */
  --radius-lg:   16px;   /* rounded-2xl — cards */
  --radius-xl:   24px;   /* rounded-3xl — modals, auth card */
  --radius-full: 9999px; /* chips, avatars, quick-action pills */

  /* Shadows (cool slate) */
  --shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm:  0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-md:  0 4px 12px rgba(15, 23, 42, 0.10);
  --shadow-lg:  0 10px 25px rgba(15, 23, 42, 0.12);
  --shadow-xl:  0 20px 45px rgba(15, 23, 42, 0.16);
  --shadow-inner: inset 0 2px 4px rgba(15, 23, 42, 0.06);

  /* Brand-tinted shadows (signature) */
  --shadow-brand: 0 10px 25px color-mix(in srgb, var(--blue-700) 20%, transparent);
  --shadow-accent-tab: 0 2px 4px rgba(255, 140, 0, 0.30);
  --shadow-accent: 0 4px 15px rgba(243, 125, 33, 0.30);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);  /* @kind other */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);         /* @kind other */
  --dur-fast:   120ms;   /* @kind other */
  --dur-normal: 200ms;   /* @kind other */
  --dur-slow:   300ms;   /* @kind other */

  /* Interaction */
  --press-scale: 0.95;   /* @kind other */
  --lift-hover: -8px;   /* marketing card hover translateY */
}