/* ==========================================================================
   Causeway Design System — Foundations
   The paved path for data creators. A causeway crosses the lake;
   governance, trust, and access are the piers that hold it up.
   ========================================================================== */

/* Type imports — Google Fonts substitutions. Brand is set up for these three.
   Inter          → UI, body, tables, forms
   Instrument Serif → Display moments, marketing headlines, the "paved path" voice
   JetBrains Mono → Code, identifiers, dataset names, schema fields
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ------------------------------------------------------------------------
     COLOR — Causeway crosses a body of water.
     "Tide" blues = the water.
     "Stone" warm neutrals = the paved road.
     "Mist" pale cool neutrals = background atmosphere.
     "Lamp" indigo = the path lit up; primary action color.
     Semantic (RAG) = rose / amber / emerald for data classification signals.
     ------------------------------------------------------------------------ */

  /* Tide — deep water */
  --tide-50:  #f0f5f9;
  --tide-100: #dae7f0;
  --tide-200: #b6cfe0;
  --tide-300: #86aecb;
  --tide-400: #5a8bb0;
  --tide-500: #3a6e96;
  --tide-600: #2b567c;
  --tide-700: #244565;
  --tide-800: #1e3651;
  --tide-900: #182a40;
  --tide-950: #0f1c2e;

  /* Stone — the paved path, warm tan/limestone */
  --stone-50:  #faf7f2;
  --stone-100: #f2ebdd;
  --stone-200: #e6d8bc;
  --stone-300: #d4bf93;
  --stone-400: #c4a877;
  --stone-500: #a88a5c;
  --stone-600: #8a6f49;
  --stone-700: #6d573a;
  --stone-800: #4f3f2b;
  --stone-900: #2e251a;

  /* Mist — cool near-whites, UI background */
  --mist-0:   #ffffff;
  --mist-50:  #f7f9fb;
  --mist-100: #eef3f6;
  --mist-200: #e2e8ee;
  --mist-300: #cbd4dc;
  --mist-400: #9ba7b2;
  --mist-500: #6b7682;
  --mist-600: #4a5460;
  --mist-700: #323a44;
  --mist-800: #1f242c;
  --mist-900: #0e1116;

  /* Lamp — primary indigo, the lit path; CTA color */
  --lamp-50:  #eef0ff;
  --lamp-100: #dfe2ff;
  --lamp-200: #c2c8ff;
  --lamp-300: #9ca5f7;
  --lamp-400: #7b85ec;
  --lamp-500: #5e67d8;
  --lamp-600: #4b52bd;     /* primary button */
  --lamp-700: #3d439b;
  --lamp-800: #313678;
  --lamp-900: #232756;

  /* Semantic — RAG / data classification */
  --rose-50:  #fff1f2;
  --rose-100: #ffe1e3;
  --rose-500: #e5484d;
  --rose-600: #cd3237;
  --rose-700: #a32025;
  --rose-800: #881e22;

  --amber-50:  #fff8eb;
  --amber-100: #fdecc8;
  --amber-500: #d68e0c;
  --amber-600: #b47307;
  --amber-700: #8a5806;
  --amber-800: #6b4405;

  --emerald-50:  #eefbf3;
  --emerald-100: #d4f4de;
  --emerald-500: #1f9254;
  --emerald-600: #16753f;
  --emerald-700: #105a30;
  --emerald-800: #0b4323;

  /* ------------------------------------------------------------------------
     SEMANTIC TOKENS — what designers actually reach for.
     ------------------------------------------------------------------------ */

  /* Surfaces */
  --bg-page:    var(--mist-50);     /* page canvas */
  --bg-surface: var(--mist-0);      /* cards, panels */
  --bg-sunken:  var(--mist-100);    /* input wells, nested panels */
  --bg-hover:   rgba(15, 28, 46, 0.04);
  --bg-press:   rgba(15, 28, 46, 0.08);
  --bg-nav:     var(--mist-0);
  --bg-overlay: rgba(15, 28, 46, 0.45);

  /* Foreground / text */
  --fg-1: var(--tide-950);          /* primary text */
  --fg-2: var(--mist-700);          /* body secondary */
  --fg-3: var(--mist-500);          /* tertiary / meta */
  --fg-4: var(--mist-400);          /* placeholder / disabled */
  --fg-inverse: var(--mist-0);
  --fg-brand:   var(--lamp-600);
  --fg-link:    var(--lamp-700);

  /* Borders */
  --border-subtle:  var(--mist-200);
  --border-default: var(--mist-300);
  --border-strong:  var(--mist-400);
  --border-focus:   var(--lamp-500);

  /* Brand — primary action */
  --brand-bg:       var(--lamp-600);
  --brand-bg-hover: var(--lamp-700);
  --brand-bg-press: var(--lamp-800);
  --brand-fg:       var(--mist-0);

  /* Semantic state backgrounds for RAG pills / alerts */
  --state-danger-bg: var(--rose-100);
  --state-danger-fg: var(--rose-800);
  --state-warn-bg:   var(--amber-100);
  --state-warn-fg:   var(--amber-800);
  --state-ok-bg:     var(--emerald-100);
  --state-ok-fg:     var(--emerald-800);
  --state-info-bg:   var(--lamp-100);
  --state-info-fg:   var(--lamp-800);
  --state-neutral-bg: var(--mist-100);
  --state-neutral-fg: var(--mist-700);

  /* ------------------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------------------ */
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Instrument Serif', 'Source Serif Pro', Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — tight, functional, data-dense */
  --text-xs:  12px;
  --text-sm:  13px;
  --text-base:14px;
  --text-md:  15px;
  --text-lg:  17px;
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;
  --text-5xl: 52px;
  --text-6xl: 72px;

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

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

  /* ------------------------------------------------------------------------
     SPACING — 4px grid
     ------------------------------------------------------------------------ */
  --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;

  /* ------------------------------------------------------------------------
     RADIUS
     ------------------------------------------------------------------------ */
  --radius-xs: 3px;
  --radius-sm: 5px;        /* pills, tags */
  --radius-md: 8px;        /* buttons, inputs */
  --radius-lg: 10px;       /* cards */
  --radius-xl: 14px;       /* large panels */
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* ------------------------------------------------------------------------
     ELEVATION — soft, cool-shadowed (never black)
     ------------------------------------------------------------------------ */
  --shadow-xs: 0 1px 0 rgba(15, 28, 46, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 28, 46, 0.06), 0 1px 1px rgba(15, 28, 46, 0.04);
  --shadow-md: 0 2px 6px rgba(15, 28, 46, 0.08), 0 1px 2px rgba(15, 28, 46, 0.05);
  --shadow-lg: 0 8px 24px rgba(15, 28, 46, 0.10), 0 2px 6px rgba(15, 28, 46, 0.05);
  --shadow-xl: 0 18px 48px rgba(15, 28, 46, 0.14), 0 4px 12px rgba(15, 28, 46, 0.06);
  --shadow-focus: 0 0 0 3px rgba(94, 103, 216, 0.32);

  /* ------------------------------------------------------------------------
     MOTION
     ------------------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
}

/* ==========================================================================
   SEMANTIC TYPE ROLES
   These compose tokens above; use in product code.
   ========================================================================== */

.type-display-xl {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}
.type-display-lg {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--fg-1);
}
.type-display-md {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

.type-h1 {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.type-h2 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.type-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--fg-1);
}
.type-h4 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

.type-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--fg-1);
}
.type-body-lg {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--fg-1);
}
.type-body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--fg-2);
}

.type-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-snug);
  color: var(--fg-1);
}
.type-meta {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: var(--leading-snug);
  color: var(--fg-3);
}

.type-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-3);
}

.type-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

.type-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-3xl);
  line-height: 1.25;
  color: var(--fg-1);
}

/* ==========================================================================
   GLOBAL RESET-ISH
   ========================================================================== */
html, body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }