/* ============================================================================
   Crelio Design Tokens
   ----------------------------------------------------------------------------
   Anchored to the real Crelio brand:
     • Navy   #01317C  (the "crelio" wordmark)
     • Sky    #03C6FF  (the small window in the "l" building — used sparingly)

   Two themes, equally canonical:
     • LIGHT  — public-facing surfaces, marketing, CRM list pages. Navy on cream.
     • DARK   — analytical / heads-down product surfaces. Sky accent on deep navy.

   Tokens authored in OKLCH so theme switching is hue-stable.
   ============================================================================ */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* ─── Typography base ───────────────────────────────────────────────────── */
:root {
  --font-sans: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale */
  --text-xs: 0.6875rem;   /* 11px */
  --text-sm: 0.8125rem;   /* 13px */
  --text-base: 0.9375rem; /* 15px */
  --text-md: 1rem;        /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.375rem;    /* 22px */
  --text-2xl: 1.625rem;   /* 26px */
  --text-3xl: 2rem;       /* 32px */
  --text-display: 2.75rem;/* 44px */

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.08em;

  /* ─── Spacing scale (4 px grid) ─────────────────────────────────────── */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* ─── Radii ─────────────────────────────────────────────────────────── */
  --radius: 0.5rem;
  --radius-xs: 0.25rem;
  --radius-sm: calc(var(--radius) - 2px);
  --radius-md: var(--radius);
  --radius-lg: calc(var(--radius) + 2px);
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;

  /* ─── Elevation / shadows ───────────────────────────────────────────── */
  --shadow-xs: 0 1px 1px 0 oklch(0 0 0 / 0.04);
  --shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.06), 0 1px 3px 0 oklch(0 0 0 / 0.05);
  --shadow-md: 0 2px 4px -1px oklch(0 0 0 / 0.06), 0 4px 8px -2px oklch(0 0 0 / 0.08);
  --shadow-lg: 0 4px 8px -2px oklch(0 0 0 / 0.08), 0 12px 24px -6px oklch(0 0 0 / 0.10);
  --shadow-xl: 0 8px 16px -4px oklch(0 0 0 / 0.10), 0 24px 48px -12px oklch(0 0 0 / 0.16);
  --shadow-focus: 0 0 0 3px var(--ring);

  /* ─── Brand constants ──────────────────────────────────────────────── */
  --brand-navy: #01317C;   /* primary brand color — the wordmark */
  --brand-sky:  #03C6FF;   /* secondary accent — the "window" in the l-building */
  --brand-navy-deep: #021F4F;   /* hover / pressed primary */
  --brand-navy-soft: #1A4798;   /* lighter navy for surfaces in dark mode */

  /* ─── Transitions ───────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-1: 80ms;
  --duration-2: 150ms;
  --duration-3: 250ms;
  --duration-4: 400ms;
}

/* ============================================================================
   LIGHT THEME — DEFAULT
   The public-facing voice. Marketing site, CRM list pages, Community, OM /
   Deal-Room share pages. Navy text on cream, sky as the spark.
   ============================================================================ */
:root,
.light {
  /* Surfaces */
  --background: #FAFAF8;                    /* warm cream */
  --bg-primary: #FFFFFF;                    /* card */
  --bg-secondary: oklch(0.97 0.003 240);    /* slate-50 */
  --bg-tertiary: oklch(0.94 0.005 240);     /* slate-100 */
  --sidebar: #FFFFFF;
  --popover: #FFFFFF;

  /* Text */
  --foreground: #021F4F;
  --text-primary-color: #021F4F;
  --text-secondary-color: oklch(0.45 0.04 255);
  --text-tertiary-color: oklch(0.62 0.03 250);

  /* Brand */
  --primary: #01317C;
  --primary-foreground: #FFFFFF;
  --accent: #03C6FF;
  --accent-foreground: #01317C;
  --ring: color-mix(in oklab, #01317C 40%, transparent);

  /* Borders */
  --border: oklch(0.93 0.006 240);
  --border-primary: oklch(0.86 0.008 240);
  --border-secondary: oklch(0.90 0.007 240);
  --border-tertiary: oklch(0.95 0.005 240);
  --input: oklch(0.96 0.003 240);

  /* Semantic status */
  --bg-info: oklch(0.94 0.04 240);
  --bg-warning: oklch(0.95 0.05 85);
  --bg-success: oklch(0.94 0.05 150);
  --bg-danger: oklch(0.94 0.04 25);
  --text-info: #01317C;
  --text-warning: oklch(0.55 0.16 60);
  --text-success: oklch(0.52 0.14 150);
  --text-danger: oklch(0.55 0.20 25);
  --destructive: oklch(0.58 0.22 25);
  --destructive-foreground: #FFFFFF;

  /* Entity / categorical hues */
  --entity-contact: #01317C;                 /* contacts → brand navy */
  --entity-company: oklch(0.50 0.22 295);    /* companies → purple */
  --entity-property: oklch(0.50 0.15 155);   /* properties → emerald */
  --entity-deal: oklch(0.58 0.16 65);        /* deals → amber */

  /* Chart palette — navy-led, sky as the bright second */
  --chart-1: #01317C;
  --chart-2: #03C6FF;
  --chart-3: oklch(0.65 0.14 150);
  --chart-4: oklch(0.66 0.18 295);
  --chart-5: oklch(0.65 0.17 65);

  /* Bulk-selection rail — uses sky accent washed over white */
  --bulk-bg: color-mix(in oklab, #03C6FF 14%, white);
  --bulk-border: color-mix(in oklab, #03C6FF 60%, white);
  --bulk-text: #01317C;

  /* View palettes (saved-view tinting) */
  --view-amber-bg: #fdf5ee; --view-amber-fg: #a8552f; --view-amber-dot: #d97757;
  --view-slate-bg: #f0f1f2; --view-slate-fg: #4a5158; --view-slate-dot: #6b7682;
  --view-moss-bg:  #eaeee4; --view-moss-fg:  #4f6037; --view-moss-dot:  #7a8f5d;
  --view-navy-bg:  #e8ecf4; --view-navy-fg:  #01317C; --view-navy-dot:  #01317C;
  --view-sky-bg:   #E0F5FF; --view-sky-fg:   #006A91; --view-sky-dot:   #03C6FF;
  --view-plum-bg:  #f1e7ed; --view-plum-fg:  #6b4254; --view-plum-dot:  #9c6480;
}

/* ============================================================================
   DARK THEME — "Heads-down product surfaces"
   Underwriting, Market Intel, AI Chat. Deep navy surfaces; the sky accent
   becomes the primary highlight, exactly like the wordmark window.
   ============================================================================ */
.dark {
  /* Surfaces — lifted directly from the brand-team white-on-dark wordmark.
     #071B34 is the exact background of `assets/crelio-wordmark-white.png`. */
  --background: #071B34;
  --bg-primary: #0E2440;
  --bg-secondary: #142C4D;
  --bg-tertiary: #1B375C;
  --sidebar: #0A2039;
  --popover: #0E2440;

  /* Text */
  --foreground: oklch(0.93 0.012 240);
  --text-primary-color: oklch(0.94 0.012 240);
  --text-secondary-color: oklch(0.72 0.020 235);
  --text-tertiary-color: oklch(0.58 0.025 235);

  /* Brand — sky becomes the primary in dark mode (matches the wordmark
     "window" being the bright element against the dark navy building) */
  --primary: #03C6FF;
  --primary-foreground: #00141F;
  --accent: #03C6FF;
  --accent-foreground: oklch(0.13 0.04 260);
  --ring: color-mix(in oklab, #03C6FF 45%, transparent);

  /* Borders */
  --border: oklch(1 0 0 / 0.08);
  --border-primary: oklch(1 0 0 / 0.14);
  --border-secondary: oklch(1 0 0 / 0.10);
  --border-tertiary: oklch(1 0 0 / 0.06);
  --input: oklch(1 0 0 / 0.10);

  /* Semantic status */
  --bg-info: color-mix(in oklab, #03C6FF 22%, transparent);
  --bg-warning: oklch(0.32 0.09 70 / 0.55);
  --bg-success: oklch(0.30 0.08 150 / 0.55);
  --bg-danger: oklch(0.32 0.10 25 / 0.55);
  --text-info: #5BD8FF;
  --text-warning: oklch(0.80 0.14 70);
  --text-success: oklch(0.76 0.14 150);
  --text-danger: oklch(0.74 0.18 25);
  --destructive: oklch(0.65 0.22 25);
  --destructive-foreground: oklch(0.98 0 0);

  /* Entity / categorical hues */
  --entity-contact: #5BD8FF;
  --entity-company: oklch(0.74 0.16 295);
  --entity-property: oklch(0.74 0.14 155);
  --entity-deal: oklch(0.78 0.16 75);

  /* Chart palette */
  --chart-1: #03C6FF;
  --chart-2: oklch(0.70 0.14 150);
  --chart-3: oklch(0.68 0.13 200);
  --chart-4: oklch(0.72 0.16 295);
  --chart-5: oklch(0.78 0.16 65);

  /* Bulk-selection rail */
  --bulk-bg: color-mix(in oklab, #03C6FF 18%, transparent);
  --bulk-border: color-mix(in oklab, #03C6FF 50%, transparent);
  --bulk-text: #5BD8FF;

  /* View palettes */
  --view-amber-bg: oklch(0.27 0.06 55);   --view-amber-fg: oklch(0.80 0.11 55);  --view-amber-dot: oklch(0.75 0.13 50);
  --view-slate-bg: oklch(0.26 0.01 245);  --view-slate-fg: oklch(0.78 0.013 245); --view-slate-dot: oklch(0.72 0.016 240);
  --view-moss-bg:  oklch(0.25 0.04 130);  --view-moss-fg:  oklch(0.80 0.09 130);  --view-moss-dot:  oklch(0.73 0.10 130);
  --view-navy-bg:  oklch(0.22 0.06 260);  --view-navy-fg:  oklch(0.82 0.06 250);  --view-navy-dot:  #5BD8FF;
  --view-sky-bg:   oklch(0.25 0.08 230);  --view-sky-fg:   oklch(0.85 0.08 220);  --view-sky-dot:   #03C6FF;
  --view-plum-bg:  oklch(0.26 0.04 340);  --view-plum-fg:  oklch(0.80 0.07 340);  --view-plum-dot:  oklch(0.73 0.09 335);
}

/* ============================================================================
   Semantic typography classes
   ============================================================================ */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  background: var(--background);
  color: var(--text-primary-color);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h1, h1 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.h2, h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
.h3, h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}
.h4, h4 {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.display {
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary-color);
}

.body-sm  { font-size: var(--text-sm);   line-height: var(--leading-normal); }
.body     { font-size: var(--text-base); line-height: var(--leading-normal); }
.body-md  { font-size: var(--text-md);   line-height: var(--leading-relaxed); }
.muted    { color: var(--text-secondary-color); }
.dim      { color: var(--text-tertiary-color); }

.num,
[data-numeric] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

code, .mono, kbd {
  font-family: var(--font-mono);
  font-size: 0.86em;
}