/* ============================================================
   Kaktos Design System — Tokens
   ------------------------------------------------------------
   All hex values verified against the source brand assets:
   • Yellow #FFB000  — bg-card.svg, octagon-mask-orb.svg, logo
   • Green  #004225  — Kaktos wordmark
   • Cream  #FFFAEE  — open-graph-img-kaktos.png page bg
   • Bone   #F5F5DC  — bg-card.svg soft fill
   • Lime   #41CB63  — graph-green-*.svg orb fill
   • Lime-soft #DCF5DE — graph-green-*.svg backdrop
   • Sky    #8DC8FF  — bg-card.svg backdrop
   ============================================================ */

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

:root {
  /* ────────────────────────────────────────────────────────── */
  /* 1. CORE PALETTE                                            */
  /* Raw brand colors — never reference these in components,    */
  /* use the semantic aliases below.                            */
  /* ────────────────────────────────────────────────────────── */

  /* Sun yellow — the cactus, the energy */
  --c-yellow-50:   #FFF8E0;
  --c-yellow-100:  #FFF1CC;
  --c-yellow-200:  #FFE199;
  --c-yellow-300:  #FFCF66;
  --c-yellow-400:  #FFC740;
  --c-yellow-500:  #FFB000;   /* PRIMARY */
  --c-yellow-600:  #E89D00;
  --c-yellow-700:  #B87A00;

  /* Forest green — the wordmark, the gravity */
  --c-green-50:    #E6EEEA;
  --c-green-100:   #B8CFC1;
  --c-green-200:   #6E9982;
  --c-green-400:   #2E8A5C;
  --c-green-500:   #006637;
  --c-green-600:   #004F2C;
  --c-green-700:   #004225;   /* PRIMARY — wordmark */
  --c-green-800:   #00351E;
  --c-green-900:   #002615;

  /* Vibrant lime — growth, data, success */
  --c-lime-100:    #EFFBF1;
  --c-lime-200:    #DCF5DE;
  --c-lime-500:    #41CB63;
  --c-lime-700:    #2B9D47;

  /* Sky — sparingly, as decorative card bg */
  --c-sky-100:     #E6F2FF;
  --c-sky-500:     #8DC8FF;
  --c-sky-700:     #4F9FE0;

  /* Neutrals — warm */
  --c-cream:       #FFFAEE;   /* warmest page bg */
  --c-bone:        #F5F5DC;   /* cooler card bg */
  --c-paper:       #FFFFFF;
  --c-ink-1:       #0F1A12;   /* near-black, on green tint */
  --c-ink-2:       #2A3D32;
  --c-ink-3:       #5C6B62;
  --c-ink-4:       #8B978F;

  /* Danger — only color outside the brand palette, used only
     for destructive feedback states. */
  --c-danger-500:  #D14A3D;
  --c-danger-100:  #FBE6E4;

  /* ────────────────────────────────────────────────────────── */
  /* 2. SEMANTIC ALIASES                                        */
  /* These are what you reference in components.                */
  /* ────────────────────────────────────────────────────────── */

  /* Brand */
  --kaktos-yellow:        var(--c-yellow-500);
  --kaktos-green:         var(--c-green-700);
  --kaktos-lime:          var(--c-lime-500);
  --kaktos-lime-soft:     var(--c-lime-200);
  --kaktos-sky:           var(--c-sky-500);
  --kaktos-sky-soft:      var(--c-sky-100);
  --kaktos-cream:         var(--c-cream);
  --kaktos-bone:          var(--c-bone);
  --kaktos-paper:         var(--c-paper);
  --kaktos-ink:           var(--c-ink-1);

  /* Surfaces */
  --surface-page:         var(--c-cream);
  --surface-page-alt:     var(--c-bone);
  --surface-card:         var(--c-paper);
  --surface-card-elevated:var(--c-paper);
  --surface-emphasis:     var(--c-yellow-500);   /* hero CTA, callout */
  --surface-emphasis-alt: var(--c-green-700);    /* inverse hero */
  --surface-sky:          var(--c-sky-500);
  --surface-sky-soft:     var(--c-sky-100);
  --surface-lime:         var(--c-lime-500);
  --surface-lime-soft:    var(--c-lime-200);

  /* Foreground (text) — on light surfaces */
  --fg-1:                 var(--c-green-700);    /* primary text */
  --fg-2:                 var(--c-ink-2);        /* secondary */
  --fg-3:                 var(--c-ink-3);        /* tertiary / captions */
  --fg-4:                 var(--c-ink-4);        /* disabled / placeholders */

  /* Foreground — on filled surfaces */
  --fg-on-yellow:         var(--c-green-700);
  --fg-on-green:          var(--c-cream);
  --fg-on-lime:           var(--c-green-700);
  --fg-on-sky:            var(--c-green-700);

  /* Borders */
  --border-subtle:        rgba(0, 66, 37, 0.10);
  --border-default:       rgba(0, 66, 37, 0.18);
  --border-strong:        var(--c-green-700);
  --border-focus:         var(--c-green-700);

  /* Semantic status */
  --status-success:       var(--c-lime-500);
  --status-success-soft:  var(--c-lime-200);
  --status-warning:       var(--c-yellow-500);
  --status-warning-soft:  var(--c-yellow-100);
  --status-danger:        var(--c-danger-500);
  --status-danger-soft:   var(--c-danger-100);
  --status-info:          var(--c-sky-500);
  --status-info-soft:     var(--c-sky-100);

  /* Decorative orb tints (for blurred-orb backgrounds) */
  --orb-yellow:           var(--c-yellow-500);
  --orb-green:            var(--c-lime-500);
  --orb-green-soft:       var(--c-lime-200);
  --orb-cream:            var(--c-bone);

  /* ────────────────────────────────────────────────────────── */
  /* 3. TYPOGRAPHY — Geist                                      */
  /* ────────────────────────────────────────────────────────── */
  --font-sans:    "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-display: var(--font-sans);

  /* Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;
  --fw-ultra:    900;

  /* Size scale (px — 1920×1080 deck context) */
  --t-display-xl: 128px;
  --t-display:    96px;
  --t-h1:         64px;
  --t-h2:         48px;
  --t-h3:         32px;
  --t-h4:         24px;
  --t-body-lg:    20px;
  --t-body:       18px;
  --t-body-sm:    16px;
  --t-caption:    14px;
  --t-micro:      12px;

  /* Line heights */
  --lh-display:   0.98;
  --lh-tight:     1.08;
  --lh-snug:      1.2;
  --lh-normal:    1.45;
  --lh-loose:     1.6;

  /* Letter spacing */
  --ls-display: -0.02em;
  --ls-tight:   -0.01em;
  --ls-normal:   0em;
  --ls-eyebrow:  0.14em;

  /* ────────────────────────────────────────────────────────── */
  /* 4. SPACING — 4px base                                      */
  /* ────────────────────────────────────────────────────────── */
  --space-0:    0;
  --space-1:    4px;
  --space-2:    8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10: 128px;

  /* ────────────────────────────────────────────────────────── */
  /* 5. RADII                                                   */
  /* ────────────────────────────────────────────────────────── */
  --r-xs:    6px;
  --r-sm:   12px;   /* inputs */
  --r-md:   16px;
  --r-lg:   24px;   /* cards (matches bg-card-blue.svg) */
  --r-xl:   32px;
  --r-2xl:  48px;   /* hero panels */
  --r-pill: 999px;  /* buttons, tags */

  /* ────────────────────────────────────────────────────────── */
  /* 6. SHADOWS — warm, low-elevation, green-tinted             */
  /* ────────────────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(0, 66, 37, 0.06);
  --shadow-sm:  0 2px 6px rgba(0, 66, 37, 0.06);
  --shadow-md:  0 6px 18px rgba(0, 66, 37, 0.08);
  --shadow-lg:  0 18px 48px rgba(0, 66, 37, 0.12);
  --shadow-xl:  0 32px 80px rgba(0, 66, 37, 0.16);
  --shadow-glow-yellow: 0 24px 64px rgba(255, 176, 0, 0.35);
  --shadow-inner: inset 0 0 0 1px rgba(0, 66, 37, 0.08);
  --shadow-focus: 0 0 0 4px rgba(0, 66, 37, 0.10);

  /* ────────────────────────────────────────────────────────── */
  /* 7. MOTION                                                  */
  /* ────────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;

  /* ────────────────────────────────────────────────────────── */
  /* 8. LAYOUT                                                  */
  /* ────────────────────────────────────────────────────────── */
  --container-max:    1440px;
  --container-text:    720px;
  --gutter-page:        96px;
  --gutter-mobile:      24px;
}

/* ============================================================
   BASE
   ============================================================ */

html {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

body { margin: 0; }

/* ============================================================
   SEMANTIC TYPE STYLES
   Use .k-* classes or the bare element selectors.
   ============================================================ */

.k-display-xl {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--t-display-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
}

.k-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
}

h1, .k-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
  color: var(--fg-1);
}

h2, .k-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--t-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
  color: var(--fg-1);
}

h3, .k-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: 0;
  color: var(--fg-1);
}

h4, .k-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  margin: 0;
  color: var(--fg-1);
}

p, .k-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}

.k-body-lg { font-size: var(--t-body-lg); line-height: var(--lh-normal); }
.k-body-sm { font-size: var(--t-body-sm); line-height: var(--lh-normal); }

.k-caption {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  font-weight: var(--fw-medium);
  color: var(--fg-3);
  line-height: var(--lh-normal);
}

.k-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-green-500);
}

code, .k-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: var(--fw-medium);
  color: var(--fg-1);
}

/* Inline link — green text, yellow underline */
a, .k-link {
  color: var(--kaktos-green);
  text-decoration: underline;
  text-decoration-color: var(--kaktos-yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
a:hover, .k-link:hover {
  color: var(--c-green-500);
  text-decoration-color: var(--c-yellow-600);
}

/* Selection */
::selection {
  background: var(--c-yellow-200);
  color: var(--kaktos-green);
}