/* ============================================================
   Kitsune AI — Colors & Type
   The Agentic AI Foundry.
   Turning commercial friction into AI-powered execution.
   ============================================================

   We build, deploy, and incubate agentic AI to solve complex
   commercial challenges. The brand is high-contrast kinetic
   editorial: stark light surfaces, razor-sharp dark type,
   sweeping multi-tail gradients (fox → indigo → electric).

   ------------------------------------------------------------
   Tokens (alphabetical by group)
     • ink             slate near-black, primary type & borders
     • site            stark clean white, default surface
     • fox             vibrant orange, primary action / brand
     • electric        electric blue, agentic execution accent
     • indigo          deep violet, inspiration / mischief
     • slate-50..900   cool neutral scale (text, dividers, surfaces)

   Legacy aliases (ember/aura/bone) are kept pointing at the new
   tokens so the existing UI kits keep working. New work should
   use the new names.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- BRAND CORE ---------- */
  --kit-ink:        #0b0d12;   /* @kind color */ /* slate near-black, primary type & borders */
  --kit-site:       #ffffff;   /* @kind color */ /* stark clean white, default surface */
  --kit-fox:        #ee4d1f;   /* @kind color */ /* vibrant orange, the cunning core */
  --kit-electric:   #2337f1;   /* @kind color */ /* electric blue, raw agentic execution */
  --kit-indigo:     #4b35c8;   /* @kind color */ /* deep violet-indigo, inspiration & mischief */

  /* ---------- SLATE SCALE (cool neutral) ---------- */
  --kit-slate-50:   #f7f8fa;
  --kit-slate-100:  #f0f2f6;
  --kit-slate-200:  #e3e6ed;
  --kit-slate-300:  #cdd2dc;
  --kit-slate-400:  #9aa1b1;
  --kit-slate-500:  #6b7180;
  --kit-slate-600:  #474c59;
  --kit-slate-700:  #2a2e38;
  --kit-slate-800:  #171a21;
  --kit-slate-900:  #0b0d12;

  /* ---------- FOX SCALE (primary action) ---------- */
  --kit-fox-50:     #fdebe3;
  --kit-fox-100:    #fbcfbb;
  --kit-fox-300:    #f48761;
  --kit-fox-500:    #ee4d1f;   /* base */
  --kit-fox-700:    #b03612;
  --kit-fox-900:    #5e1a08;

  /* ---------- ELECTRIC SCALE (data / agentic execution) ---------- */
  --kit-electric-50:  #e7e9fe;
  --kit-electric-100: #c2c8fc;
  --kit-electric-300: #6b78f6;
  --kit-electric-500: #2337f1;   /* base */
  --kit-electric-700: #1623a8;
  --kit-electric-900: #0a1158;

  /* ---------- INDIGO SCALE (purple-indigo, used sparingly) ---------- */
  --kit-indigo-50:  #ebe8f8;
  --kit-indigo-100: #cdc5ee;
  --kit-indigo-300: #8b7adb;
  --kit-indigo-500: #4b35c8;   /* base */
  --kit-indigo-700: #311f8b;
  --kit-indigo-900: #1a1054;

  /* ---------- LEGACY ALIASES (do not use in new work) ---------- */
  --kit-bone:       var(--kit-site);
  --kit-bone-50:    var(--kit-slate-50);
  --kit-bone-100:   #ffffff;
  --kit-bone-200:   var(--kit-slate-100);
  --kit-bone-300:   var(--kit-slate-200);
  --kit-bone-400:   var(--kit-slate-400);
  --kit-bone-500:   var(--kit-slate-500);
  --kit-bone-600:   var(--kit-slate-600);
  --kit-bone-700:   var(--kit-slate-700);
  --kit-bone-800:   var(--kit-slate-800);
  --kit-bone-900:   var(--kit-slate-900);
  --kit-ember:      var(--kit-fox);
  --kit-ember-50:   var(--kit-fox-50);
  --kit-ember-100:  var(--kit-fox-100);
  --kit-ember-300:  var(--kit-fox-300);
  --kit-ember-500:  var(--kit-fox-500);
  --kit-ember-700:  var(--kit-fox-700);
  --kit-ember-900:  var(--kit-fox-900);
  --kit-aura:       var(--kit-indigo);
  --kit-aura-50:    var(--kit-indigo-50);
  --kit-aura-100:   var(--kit-indigo-100);
  --kit-aura-300:   var(--kit-indigo-300);
  --kit-aura-500:   var(--kit-indigo-500);
  --kit-aura-700:   var(--kit-indigo-700);
  --kit-aura-900:   var(--kit-indigo-900);

  /* ---------- SEMANTIC — LIGHT (default) ---------- */
  --bg:             var(--kit-site);
  --bg-elev:        #ffffff;
  --bg-sunken:      var(--kit-slate-50);

  --fg:             var(--kit-ink);
  --fg-1:           var(--kit-ink);        /* primary text */
  --fg-2:           var(--kit-slate-700);  /* secondary text */
  --fg-3:           var(--kit-slate-500);  /* tertiary / labels */
  --fg-mute:        var(--kit-slate-400);

  --border:         rgba(11, 13, 18, 0.07);
  --border-strong:  rgba(11, 13, 18, 0.14);

  --accent:         var(--kit-fox-500);
  --accent-hover:   var(--kit-fox-700);
  --accent-fg:      #ffffff;

  --link:           var(--kit-electric-500);
  --focus-ring:     var(--kit-electric-500);

  --success:        #2f8f5d;
  --warn:           #eab308;
  --danger:         #dc2626;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display:   'DM Serif Display', 'Georgia', 'Times New Roman', serif;
  --font-sans:      'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE SCALE ---------- */
  --fs-display-1:  clamp(56px, 8.4vw, 128px); /* @kind font */
  --fs-display-2:  clamp(40px, 5.6vw, 80px);  /* @kind font */
  --fs-h1:         clamp(36px, 4.2vw, 56px);  /* @kind font */
  --fs-h2:         clamp(28px, 3vw, 40px);    /* @kind font */
  --fs-h3:         24px; /* @kind font */
  --fs-h4:         20px; /* @kind font */
  --fs-body-lg:    18px; /* @kind font */
  --fs-body:       16px; /* @kind font */
  --fs-body-sm:    14px; /* @kind font */
  --fs-eyebrow:    12px; /* @kind font */

  /* ---------- SPACING (4 px base) ---------- */
  --sp-0: 0; /* @kind spacing */
  --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;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---------- RADII ---------- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 40px;
  --r-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-xs: 0 1px 2px rgba(11, 13, 18, 0.05);
  --shadow-sm: 0 2px 6px rgba(11, 13, 18, 0.07);
  --shadow-md: 0 10px 28px -10px rgba(11, 13, 18, 0.18);
  --shadow-lg: 0 28px 70px -22px rgba(11, 13, 18, 0.32);
  --shadow-glow-fox:      0 14px 44px -12px rgba(238, 77, 31, 0.50);
  --shadow-glow-electric: 0 14px 44px -12px rgba(35, 55, 241, 0.50);
  --shadow-glow-indigo:   0 14px 44px -12px rgba(75, 53, 200, 0.50);
  /* legacy alias */
  --shadow-glow-ember:    var(--shadow-glow-fox);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);  /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --ease-kinetic: cubic-bezier(0.16, 1, 0.3, 1);  /* @kind other */ /* sweeping shape-shift entrance */
  --dur-fast:    120ms;  /* @kind other */
  --dur-base:    200ms;  /* @kind other */
  --dur-slow:    360ms;  /* @kind other */
  --dur-sweep:   720ms;  /* @kind other */ /* gradient trails, multi-tail morphs */

  /* ---------- SIGNATURE GRADIENTS ---------- */
  /* The Multi-Tail: the sweeping fox-tail gradient. Used on the
     wordmark's "AI", hero accents, and shape-shift trails. */
  --kit-gradient: linear-gradient(95deg, #ee4d1f 0%, #b53a2f 20%, #4b35c8 55%, #2337f1 100%); /* @kind color */
  --kit-page-gradient: linear-gradient(118deg, #f7f8fa 0%, #ffffff 32%, #eef0f8 70%, #e6e8f5 100%); /* @kind color */
  --kit-trail-gradient: linear-gradient(95deg, #2337f1 0%, #4b35c8 100%); /* @kind color */
}

/* ---------- DARK SURFACE ---------- */
[data-theme="dark"], .kit-dark {
  --bg:             var(--kit-ink);
  --bg-elev:        #14171f;
  --bg-sunken:      #06070a;

  --fg:             #ffffff;
  --fg-1:           #ffffff;
  --fg-2:           var(--kit-slate-300);
  --fg-3:           var(--kit-slate-400);
  --fg-mute:        var(--kit-slate-600);

  --border:         #232734;
  --border-strong:  #353a4a;

  --accent:         var(--kit-fox-500);
  --accent-hover:   var(--kit-fox-300);
  --link:           var(--kit-electric-300);
}

/* ============================================================
   BASE ELEMENT STYLES
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1, h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.02;
  color: var(--fg-1);
}
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }

h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--fg-1);
}
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }

.display-1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-1);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.025em;
}
.display-2 {
  font-family: var(--font-display);
  font-size: var(--fs-display-2);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.02em;
}

p { color: var(--fg-2); line-height: 1.6; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
}

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

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--kit-fox-500); color: #fff; }

/* ---------- SIGNATURE GRADIENT TEXT (KITSUNE AI treatment) ---------- */
.kit-grad-text {
  background: var(--kit-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}