/* ============================================================
   Intuigence Design System — Colors & Type (Caliper tokens)
   ------------------------------------------------------------
   Derived from Caliper Design System v0.1 (Figma) and the
   Intuigence wordmark. The system is a shadcn-based neutral
   core (black → near-black → neutrals) with the Intuigence
   signature orange as the only accent.
   ============================================================ */

/* -------- Font faces -------- */
@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Geist & Geist Mono are used for ~20% of the system (shadcn
   docs chrome + a few numeric readouts). Loaded from CDN as
   a near-exact match since no TTFs were supplied. */
@import url("https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5/latin-400.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5/latin-500.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5/latin-600.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5/latin-700.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/geist-mono@5/latin-400.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/geist-mono@5/latin-500.css");

:root {
  /* ───────── Brand ───────── */
  --brand-orange:          #FF4F17;  /* Intuigence primary — logo mark core */
  --brand-orange-600:      #E6441A;  /* hover */
  --brand-orange-500:      #FF4F17;  /* default */
  --brand-orange-400:      #FF8055;  /* logo secondary ring */
  --brand-orange-200:      #FFC2A8;  /* logo tertiary ring */
  --brand-orange-50:       #FFF2EC;  /* tint backgrounds */

  /* ───────── Neutrals (light) ───────── */
  /* Matches shadcn "neutral" scale used throughout Caliper. */
  --neutral-0:             #FFFFFF;
  --neutral-50:            #FAFAFA;
  --neutral-100:           #F5F5F5;
  --neutral-150:           #F0F0F0;
  --neutral-200:           #E5E5E5;
  --neutral-300:           #D4D4D4;
  --neutral-400:           #A3A3A3;
  --neutral-500:           #737373;
  --neutral-600:           #525252;
  --neutral-700:           #404040;
  --neutral-800:           #262626;
  --neutral-900:           #171717;
  --neutral-950:           #0A0A0A;

  /* ───────── Semantic — Light theme (default) ───────── */
  --bg:                    var(--neutral-0);
  --bg-muted:              var(--neutral-100);
  --bg-subtle:             var(--neutral-50);
  --bg-inverse:            var(--neutral-950);
  --surface:               var(--neutral-0);
  --surface-elevated:      var(--neutral-0);
  --surface-sunken:        var(--neutral-100);

  --fg:                    var(--neutral-950);   /* body text */
  --fg-1:                  var(--neutral-900);   /* strong */
  --fg-2:                  var(--neutral-600);   /* secondary */
  --fg-3:                  var(--neutral-500);   /* muted */
  --fg-4:                  var(--neutral-400);   /* placeholder */
  --fg-inverse:            var(--neutral-50);

  --border:                var(--neutral-200);
  --border-strong:         var(--neutral-300);
  --border-subtle:         var(--neutral-150);

  --ring:                  var(--neutral-950);   /* focus ring (default shadcn) */
  --ring-brand:            var(--brand-orange);

  /* Action / accent — uses brand orange for primary CTAs, but
     the default Caliper "primary" button is near-black. Orange
     is reserved for brand moments, selected workflow nodes and
     active data-viz highlights. */
  --action-primary:        var(--neutral-950);
  --action-primary-fg:     var(--neutral-50);
  --action-primary-hover:  var(--neutral-800);
  --action-accent:         var(--brand-orange);
  --action-accent-fg:      #FFFFFF;
  --action-accent-hover:   var(--brand-orange-600);

  /* Status */
  --danger:                #DC2626;
  --danger-fg:             #FFFFFF;
  --warning:               #EAB308;
  --warning-fg:            #111827;
  --success:               #16A34A;
  --success-fg:            #FFFFFF;
  --info:                  #2563EB;
  --info-fg:               #FFFFFF;

  /* Chart palette (from Caliper chart frames) */
  --chart-1:               #FF4F17;
  --chart-2:               #0052B4;
  --chart-3:               #FCBD4C;
  --chart-4:               #30A9E5;
  --chart-5:               #6DA544;
  --chart-6:               #A855F7;

  /* ───────── Radii ───────── */
  --radius-xs:             2px;
  --radius-sm:             4px;
  --radius-md:             6px;   /* buttons, inputs */
  --radius-lg:             8px;   /* cards */
  --radius-xl:             12px;  /* hover cards, panels */
  --radius-2xl:            14px;  /* canvas / preview frames */
  --radius-3xl:            16px;  /* docs preview frames */
  --radius-full:           9999px;

  /* ───────── Elevation ───────── */
  --shadow-xs:             0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-sm:             0 1px 2px 0 rgba(0,0,0,0.05), 0 1px 1px 0 rgba(0,0,0,0.03);
  --shadow-md:             0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg:             0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05);
  --shadow-xl:             0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.04);
  --shadow-inner:          inset 0 1px 2px 0 rgba(0,0,0,0.05);

  /* ───────── Spacing ───────── */
  --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-24:              96px;

  /* ───────── Type families ───────── */
  --font-sans:             "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display:          "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:             "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-docs:             "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;

  /* ───────── Type scale (matches Caliper frames) ───────── */
  --fs-11:                 11px;
  --fs-12:                 12px;   /* kbd, tiny label */
  --fs-14:                 14px;   /* body / UI default */
  --fs-16:                 16px;
  --fs-18:                 18px;
  --fs-20:                 20px;
  --fs-24:                 24px;
  --fs-30:                 30px;
  --fs-36:                 36px;
  --fs-48:                 48px;
  --fs-60:                 60px;
  --fs-88:                 88px;   /* docs hero numerals */
  --fs-128:                128px;
  --fs-160:                160px;  /* cover wordmark */

  --lh-tight:              1.1;
  --lh-snug:               1.25;
  --lh-normal:             1.5;
  --lh-relaxed:            1.6;

  --tracking-tight:        -0.04em;  /* display */
  --tracking-normal:       0;
  --tracking-wide:         0.02em;
}

/* ───────── Dark theme ───────── */
:root[data-theme="dark"],
.theme-dark {
  --bg:                    var(--neutral-950);
  --bg-muted:              var(--neutral-900);
  --bg-subtle:             #121212;
  --bg-inverse:            var(--neutral-50);
  --surface:               var(--neutral-950);
  --surface-elevated:      #141414;
  --surface-sunken:        #070707;

  --fg:                    var(--neutral-50);
  --fg-1:                  #FAFAFA;
  --fg-2:                  var(--neutral-400);
  --fg-3:                  var(--neutral-500);
  --fg-4:                  var(--neutral-600);
  --fg-inverse:            var(--neutral-950);

  --border:                rgba(255,255,255,0.10);
  --border-strong:         rgba(255,255,255,0.18);
  --border-subtle:         rgba(255,255,255,0.06);

  --ring:                  var(--neutral-300);

  --action-primary:        var(--neutral-50);
  --action-primary-fg:     var(--neutral-950);
  --action-primary-hover:  var(--neutral-200);

  --shadow-xs:             0 1px 2px 0 rgba(0,0,0,0.6);
  --shadow-sm:             0 1px 2px 0 rgba(0,0,0,0.6);
  --shadow-md:             0 4px 6px -1px rgba(0,0,0,0.5);
  --shadow-lg:             0 10px 15px -3px rgba(0,0,0,0.6);
}

/* ───────── Semantic element mappings ─────────
   Opt-in: add class "caliper" to a container to apply these. */
.caliper {
  color: var(--fg);
  background: var(--bg);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.caliper h1, .prose h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-48);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.caliper h2, .prose h2 {
  font-size: var(--fs-30);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  color: var(--fg-1);
}
.caliper h3, .prose h3 {
  font-size: var(--fs-24);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.caliper h4, .prose h4 {
  font-size: var(--fs-20);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.caliper h5, .prose h5 {
  font-size: var(--fs-18);
  font-weight: 600;
  color: var(--fg-1);
}
.caliper h6, .prose h6 {
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--fg-1);
}
.caliper p, .prose p {
  font-size: var(--fs-14);
  line-height: var(--lh-relaxed);
  color: var(--fg);
}
.caliper small, .prose small {
  font-size: var(--fs-12);
  color: var(--fg-2);
}
.caliper code, .prose code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-muted);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  color: var(--fg-1);
}
.caliper a, .prose a {
  color: var(--fg-1);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.caliper a:hover { color: var(--brand-orange); }

.caliper kbd {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--border-strong);
  color: var(--fg-2);
}