/*
 * Coordia Design System — Colors + Type
 * ─────────────────────────────────────────────────────────────────
 * Sourced from app-frontend/app/globals.css in the contract-coordinator
 * codebase. Uses oklch throughout. Brand is tenant-themable; defaults
 * here represent the "house" Coordia palette.
 */

/* Brand fonts — uploaded by the user. Noto Sans Variable replaces
   Geist as the primary UI face. Mono usage falls back to system mono
   until a brand mono is supplied. */
@font-face {
  font-family: 'Noto Sans';
  src: url('fonts/NotoSans-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans';
  src: url('fonts/NotoSans-Italic-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── Tenant brand (overridden per workspace) ───────────────────── */
  --color-brand-primary:   #1a56db;   /* default Coordia blue          */
  --color-brand-secondary: #e1effe;
  --color-brand-text-on-primary: #ffffff;

  /* ── Surface / neutrals (zinc-tinted) ──────────────────────────── */
  --bg:        oklch(1 0 0);
  --bg-sunk:   oklch(0.975 0.002 270);
  --bg-elev:   oklch(0.97  0.003 270);
  --bg-muted:  oklch(0.965 0.004 270);

  /* ── Lines / borders ───────────────────────────────────────────── */
  --line:        oklch(0.922 0.004 270);
  --line-soft:   oklch(0.953 0.003 270);
  --line-strong: oklch(0.87  0.005 270);

  /* ── Ink / foreground (5-step ramp) ────────────────────────────── */
  --ink:   oklch(0.21  0.005 270);   /* primary text                  */
  --ink-2: oklch(0.372 0.007 270);   /* secondary                      */
  --ink-3: oklch(0.552 0.006 270);   /* tertiary / muted-foreground    */
  --ink-4: oklch(0.712 0.005 270);   /* quaternary / placeholders      */
  --ink-5: oklch(0.85  0.004 270);   /* disabled                       */

  /* ── Brand role tokens ─────────────────────────────────────────── */
  --brand:      oklch(0.21  0.005 270);   /* near-black brand surface  */
  --brand-hi:   oklch(0.30  0.005 270);
  --brand-ink:  oklch(0.985 0     0);
  --brand-wash: oklch(0.96  0.003 270);
  --brand-line: oklch(0.87  0.005 270);

  /* ── Agent (analogous violet-blue, paired with brand) ──────────── */
  --agent:      oklch(0.52 0.14 262);
  --agent-wash: oklch(0.97 0.018 262);
  --agent-line: oklch(0.88 0.04  262);

  /* ── Semantic — analogous warm/cool around brand ───────────────── */
  --ok:        oklch(0.60 0.14 150);
  --ok-wash:   oklch(0.965 0.025 150);
  --ok-line:   oklch(0.87  0.055 150);

  --warn:      oklch(0.72 0.16 65);
  --warn-ink:  oklch(0.48 0.13 55);
  --warn-wash: oklch(0.97 0.032 65);
  --warn-line: oklch(0.87 0.065 65);

  --danger:      oklch(0.58 0.20 27);
  --danger-wash: oklch(0.97 0.028 27);
  --danger-line: oklch(0.87 0.065 27);

  /* ── Shadows ───────────────────────────────────────────────────── */
  --sh-xs: 0 1px 2px 0 oklch(0 0 0 / 0.04);
  --sh-sm: 0 1px 2px 0 oklch(0 0 0 / 0.05);
  --sh-md: 0 1px 3px 0 oklch(0 0 0 / 0.06), 0 1px 2px 0 oklch(0 0 0 / 0.04);
  --sh-lg: 0 4px 6px -1px oklch(0 0 0 / 0.08), 0 2px 4px -2px oklch(0 0 0 / 0.05);

  /* ── Radii (radius-* scale, base 0.5rem) ───────────────────────── */
  --radius:     0.5rem;
  --radius-sm:  calc(var(--radius) * 0.6);
  --radius-md:  calc(var(--radius) * 0.8);
  --radius-lg:  var(--radius);
  --radius-xl:  calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);

  /* ── Spacing scale (Tailwind-aligned, 4px base) ────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ── Typography ────────────────────────────────────────────────── */
  --font-sans:         'Noto Sans', ui-sans-serif, system-ui, sans-serif;
  --font-heading:      var(--font-sans);
  --font-mono-display: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — pulled from the dashboard / sidebar / metric components */
  --fs-display:  34px;   /* huge metric numbers (mono)        */
  --fs-h1:       22px;   /* page heading                       */
  --fs-h2:       16px;   /* card title                         */
  --fs-body:     14px;   /* default body                       */
  --fs-body-sm:  13px;   /* sidebar / dense rows               */
  --fs-meta:     12px;   /* tertiary meta                      */
  --fs-caption:  11.5px; /* timestamps / captions              */
  --fs-eyebrow:  10.5px; /* uppercase mono eyebrows            */

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-default: 1.5;

  --tr-tight:   -0.025em;   /* large numerals    */
  --tr-h1:      -0.015em;
  --tr-card:    -0.01em;
  --tr-caps:    0.10em;     /* uppercase eyebrows */
  --tr-mono:    0.03em;     /* small mono badges  */
}

/* ─── Semantic element styles ─────────────────────────────────────── */
html { font-family: var(--font-sans); color: var(--ink); background: var(--bg); }

h1 {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: var(--tr-h1);
  line-height: var(--lh-tight);
  color: var(--ink);
  margin: 0;
}
h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: var(--tr-card);
  line-height: var(--lh-snug);
  color: var(--ink);
  margin: 0;
}
h3 {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

p, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-default);
  color: var(--ink-2);
}

small, .meta { font-size: var(--fs-meta); color: var(--ink-3); }

.eyebrow {
  font-family: var(--font-mono-display);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  color: var(--ink-4);
}

code, kbd, .mono {
  font-family: var(--font-mono-display);
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-mono);
}

.display-num {
  font-family: var(--font-mono-display);
  font-size: var(--fs-display);
  font-weight: 600;
  letter-spacing: var(--tr-tight);
  line-height: 1;
  color: var(--ink);
}