/* ============================================================
 * Koronet Design Tokens
 * Exact values from packages/tokens/src/figma/normalized/*.json
 * — base palette + semantic aliases + typography + spacing + radius
 * These CSS variables match the --koronet-* names consumed by
 * components in packages/ui/src/components/
 * ============================================================ */

:root {
  /* -------- BASE COLOR PALETTES (Figma: color/<hue>/<stop>) -------- */

  /* Dark (neutral-warm) — primary text & surfaces */
  --koronet-color-base-dark-50:  #f7f8fa;
  --koronet-color-base-dark-100: #e8ebef;
  --koronet-color-base-dark-200: #dcdfe4;
  --koronet-color-base-dark-300: #bdc2c7;
  --koronet-color-base-dark-400: #70757a;
  --koronet-color-base-dark-500: #505459;
  --koronet-color-base-dark-600: #363a3e;
  --koronet-color-base-dark-700: #1f2225;
  --koronet-color-base-dark-800: #121619;  /* brand ink */
  --koronet-color-base-dark-900: #060707;

  /* Neutral (cool blue-gray) */
  --koronet-color-base-neutral-50:  #f7fcff;
  --koronet-color-base-neutral-100: #e8f0f7;
  --koronet-color-base-neutral-200: #cedbe8;
  --koronet-color-base-neutral-300: #adc0d2;
  --koronet-color-base-neutral-400: #8ea2bd;
  --koronet-color-base-neutral-500: #6f88a8;
  --koronet-color-base-neutral-600: #567094;
  --koronet-color-base-neutral-700: #40597f;
  --koronet-color-base-neutral-800: #2c4069;
  --koronet-color-base-neutral-900: #172b4d;

  /* Blue — CTA link */
  --koronet-color-base-blue-50:  #eef4fd;
  --koronet-color-base-blue-100: #d9e2fa;
  --koronet-color-base-blue-200: #b0c4f5;
  --koronet-color-base-blue-300: #85a7ee;
  --koronet-color-base-blue-400: #598be5;
  --koronet-color-base-blue-500: #2d6fdb;
  --koronet-color-base-blue-600: #0055cc;
  --koronet-color-base-blue-700: #004eb2;
  --koronet-color-base-blue-800: #003b8c;
  --koronet-color-base-blue-900: #002b66;

  /* Green — success */
  --koronet-color-base-green-50:  #e1faee;
  --koronet-color-base-green-100: #b6f1d5;
  --koronet-color-base-green-200: #83d7b3;
  --koronet-color-base-green-300: #52bd92;
  --koronet-color-base-green-400: #26a374;
  --koronet-color-base-green-500: #00875a;
  --koronet-color-base-green-600: #00663f;
  --koronet-color-base-green-700: #005233;
  --koronet-color-base-green-800: #00402a;
  --koronet-color-base-green-900: #002c1c;

  /* Lime */
  --koronet-color-base-lime-50:  #efffd2;
  --koronet-color-base-lime-100: #dcf69a;
  --koronet-color-base-lime-200: #c3df68;
  --koronet-color-base-lime-300: #aac93d;
  --koronet-color-base-lime-400: #91b420;
  --koronet-color-base-lime-500: #789d00;
  --koronet-color-base-lime-600: #759500;
  --koronet-color-base-lime-700: #628000;
  --koronet-color-base-lime-800: #4e6700;
  --koronet-color-base-lime-900: #3a4c00;

  /* Yellow — warning */
  --koronet-color-base-yellow-50:  #fffaeb;
  --koronet-color-base-yellow-100: #fff2cc;
  --koronet-color-base-yellow-200: #ffe699;
  --koronet-color-base-yellow-300: #ffda66;
  --koronet-color-base-yellow-400: #ffcf33;
  --koronet-color-base-yellow-500: #ffc400;
  --koronet-color-base-yellow-600: #cc9900;
  --koronet-color-base-yellow-700: #b48600;
  --koronet-color-base-yellow-800: #9c7400;
  --koronet-color-base-yellow-900: #7a5b00;

  /* Red — danger */
  --koronet-color-base-red-50:  #fee0d8;
  --koronet-color-base-red-100: #f9b6a3;
  --koronet-color-base-red-200: #ed8b71;
  --koronet-color-base-red-300: #e06649;
  --koronet-color-base-red-400: #d44726;
  --koronet-color-base-red-500: #bf2600;
  --koronet-color-base-red-600: #aa2200;
  --koronet-color-base-red-700: #8f1f00;
  --koronet-color-base-red-800: #751900;
  --koronet-color-base-red-900: #4e1000;

  /* Cyan */
  --koronet-color-base-cyan-50:  #e8fafd;
  --koronet-color-base-cyan-100: #cff1fa;
  --koronet-color-base-cyan-200: #9fdef0;
  --koronet-color-base-cyan-300: #6dc7e4;
  --koronet-color-base-cyan-400: #3dafd8;
  --koronet-color-base-cyan-500: #0b95cb;
  --koronet-color-base-cyan-600: #0983bd;
  --koronet-color-base-cyan-700: #086fa1;
  --koronet-color-base-cyan-800: #075c83;
  --koronet-color-base-cyan-900: #05455f;

  /* Purple */
  --koronet-color-base-purple-50:  #f3e6fe;
  --koronet-color-base-purple-100: #e3ccfb;
  --koronet-color-base-purple-200: #c399ef;
  --koronet-color-base-purple-300: #a266e3;
  --koronet-color-base-purple-400: #8233d7;
  --koronet-color-base-purple-500: #5f00cb;
  --koronet-color-base-purple-600: #5c00b3;
  --koronet-color-base-purple-700: #500099;
  --koronet-color-base-purple-800: #430080;
  --koronet-color-base-purple-900: #350066;

  /* -------- SEMANTIC: BACKGROUND -------- */
  --koronet-color-background-dark:  #000000;
  --koronet-color-background-light: #ffffff;
  --koronet-color-background-primary:   var(--koronet-color-background-light);
  --koronet-color-background-secondary: var(--koronet-color-base-dark-50);
  --koronet-color-background-tertiary:  var(--koronet-color-base-dark-100);

  /* -------- SEMANTIC: SURFACE -------- */
  --koronet-color-surface-primary-default:           #121619;
  --koronet-color-surface-primary-inverse:           #ffffff;
  --koronet-color-surface-primary-hovered:           #363a3e;
  --koronet-color-surface-primary-hovered-inverse:   #cedbe8;
  --koronet-color-surface-primary-pressed:           #505459;
  --koronet-color-surface-primary-pressed-inverse:   #8ea2bd;
  --koronet-color-surface-primary-disabled:          #e8ebef;
  --koronet-color-surface-primary-disabled-inverse:  #363a3e;

  --koronet-color-surface-secondary-default:         #f7f8fa;
  --koronet-color-surface-secondary-inverse:         #121619;
  --koronet-color-surface-secondary-hovered:         #e8f0f7;
  --koronet-color-surface-secondary-hovered-inverse: #363a3e;
  --koronet-color-surface-secondary-pressed:         #adc0d2;
  --koronet-color-surface-secondary-pressed-inverse: #70757a;

  --koronet-color-surface-feedback-danger-strong:    #bf2600;
  --koronet-color-surface-feedback-danger-subtle:    #fee0d8;
  --koronet-color-surface-feedback-warning-strong:   #ffc400;
  --koronet-color-surface-feedback-warning-subtle:   #fff2cc;
  --koronet-color-surface-feedback-success-strong:   #00875a;
  --koronet-color-surface-feedback-success-subtle:   #e1faee;

  --koronet-color-surface-accent-cyan-strong:        #0b95cb;
  --koronet-color-surface-accent-cyan-subtle:        #cff1fa;
  --koronet-color-surface-accent-purple-strong:      #8233d7;
  --koronet-color-surface-accent-purple-subtle:      #f3e6fe;
  --koronet-color-surface-accent-neutral-strong:     #172b4d;
  --koronet-color-surface-accent-neutral-subtle:     #e8f0f7;
  --koronet-color-surface-accent-neutral-strong-inverse: #567094;

  /* -------- SEMANTIC: TEXT -------- */
  --koronet-color-text-primary:            #121619;
  --koronet-color-text-inverse:            #ffffff;
  --koronet-color-text-secondary:          #505459;
  --koronet-color-text-secondary-inverse:  #bdc2c7;
  --koronet-color-text-tertiary:           #567094;
  --koronet-color-text-tertiary-inverse:   #cedbe8;
  --koronet-color-text-disabled:           #bdc2c7;
  --koronet-color-text-disabled-inverse:   #505459;
  --koronet-color-text-cta-default:        #121619;
  --koronet-color-text-cta-inverse:        #ffffff;
  --koronet-color-text-cta-link:           #0055cc;
  --koronet-color-text-cta-link-inverse:   #85a7ee;
  --koronet-color-text-cta-link-visited:   #8233d7;
  --koronet-color-text-cta-link-visited-inverse: #c399ef;
  --koronet-color-text-feedback-danger:    #bf2600;
  --koronet-color-text-feedback-danger-strong: #4e1000;
  --koronet-color-text-feedback-warning:   #7a5b00;
  --koronet-color-text-feedback-success:   #00875a;
  --koronet-color-text-feedback-success-strong: #002c1c;
  --koronet-color-text-accent-cyan:        #0983bd;
  --koronet-color-text-accent-cyan-strong: #05455f;
  --koronet-color-text-accent-purple:      #5f00cb;
  --koronet-color-text-accent-purple-strong: #350066;
  --koronet-color-text-accent-neutral:     #172b4d;

  /* -------- SEMANTIC: BORDER -------- */
  --koronet-color-border-primary:          #cedbe8; /* alias: subtle */
  --koronet-color-border-subtle:           #cedbe8;
  --koronet-color-border-subtle-inverse:   #8ea2bd;
  --koronet-color-border-strong:           #121619;
  --koronet-color-border-strong-inverse:   #ffffff;
  --koronet-color-border-secondary:        #cedbe8;
  --koronet-color-border-disabled:         #bdc2c7;
  --koronet-color-border-disabled-inverse: #505459;
  --koronet-color-border-focused:          #ffc400;
  --koronet-color-border-feedback-danger:  #bf2600;
  --koronet-color-border-feedback-warning: #7a5b00;
  --koronet-color-border-feedback-success: #00875a;
  --koronet-color-border-accent-cyan:      #0983bd;
  --koronet-color-border-accent-purple:    #5f00cb;
  --koronet-color-border-accent-neutral:   #172b4d;

  /* -------- SEMANTIC: ICON -------- */
  --koronet-color-icon-primary:            #121619;
  --koronet-color-icon-inverse:            #ffffff;
  --koronet-color-icon-secondary:          #505459;
  --koronet-color-icon-tertiary:           #567094;
  --koronet-color-icon-disabled:           #bdc2c7;
  --koronet-color-icon-cta-default:        #121619;
  --koronet-color-icon-cta-link:           #0055cc;

  /* -------- TYPOGRAPHY -------- */
  --koronet-typography-fontFamily-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --koronet-typography-fontFamily-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --koronet-typography-fontSize-xs:   12px;  /* caption/body sm */
  --koronet-typography-fontSize-sm:   14px;  /* body base */
  --koronet-typography-fontSize-base: 16px;  /* link lg / heading xs */
  --koronet-typography-fontSize-lg:   20px;  /* heading sm */
  --koronet-typography-fontSize-xl:   28px;  /* heading md */
  --koronet-typography-fontSize-2xl:  40px;  /* heading lg */
  --koronet-typography-fontSize-display: 64px;

  --koronet-typography-fontWeight-normal:   400;
  --koronet-typography-fontWeight-medium:   500;
  --koronet-typography-fontWeight-semibold: 600;
  --koronet-typography-fontWeight-bold:     700;
  --koronet-typography-fontWeight-heavy:    800;

  /* -------- SPACING (px) -------- */
  --koronet-spacing-base-none: 0;
  --koronet-spacing-base-xxs:  2px;
  --koronet-spacing-base-xs:   4px;
  --koronet-spacing-base-sm:   8px;
  --koronet-spacing-base-md:   12px;
  --koronet-spacing-base-lg:   16px;
  --koronet-spacing-base-xl:   24px;
  --koronet-spacing-base-2xl:  32px;
  --koronet-spacing-base-3xl:  40px;
  --koronet-spacing-base-4xl:  48px;
  --koronet-spacing-base-5xl:  64px;
  --koronet-spacing-base-6xl:  80px;
  --koronet-spacing-base-7xl:  96px;

  /* Padding aliases (mirrors packages/ui token names) */
  --koronet-spacing-padding-xxs: var(--koronet-spacing-base-xxs);
  --koronet-spacing-padding-xs:  var(--koronet-spacing-base-xs);
  --koronet-spacing-padding-sm:  var(--koronet-spacing-base-sm);
  --koronet-spacing-padding-md:  var(--koronet-spacing-base-md);
  --koronet-spacing-padding-lg:  var(--koronet-spacing-base-lg);
  --koronet-spacing-padding-xl:  var(--koronet-spacing-base-xl);
  --koronet-spacing-padding-2xl: var(--koronet-spacing-base-2xl);
  --koronet-spacing-padding-3xl: var(--koronet-spacing-base-3xl);

  /* Gap aliases */
  --koronet-spacing-gap-xxs: var(--koronet-spacing-base-xxs);
  --koronet-spacing-gap-xs:  var(--koronet-spacing-base-xs);
  --koronet-spacing-gap-sm:  var(--koronet-spacing-base-sm);
  --koronet-spacing-gap-md:  var(--koronet-spacing-base-md);
  --koronet-spacing-gap-lg:  var(--koronet-spacing-base-lg);
  --koronet-spacing-gap-xl:  var(--koronet-spacing-base-xl);

  /* -------- RADIUS -------- */
  --koronet-radius-base-none: 0;
  --koronet-radius-base-xxs:  2px;
  --koronet-radius-base-xs:   4px;
  --koronet-radius-base-sm:   6px;
  --koronet-radius-base-md:   8px;
  --koronet-radius-base-lg:   10px;
  --koronet-radius-base-xl:   12px;
  --koronet-radius-base-2xl:  16px;
  --koronet-radius-base-3xl:  20px;
  --koronet-radius-base-4xl:  24px;
  --koronet-radius-base-5xl:  32px;
  --koronet-radius-base-6xl:  64px;
  --koronet-radius-base-full: 9999px;

  /* Convenient aliases used in SKILL.md / components */
  --koronet-radius-sm:   6px;
  --koronet-radius-md:   10px;
  --koronet-radius-lg:   14px;
  --koronet-radius-xl:   20px;
  --koronet-radius-full: 9999px;

  /* Background / border / text aliases for inverse surfaces */
  --koronet-color-background-inverse: var(--koronet-color-base-dark-800);
  --koronet-color-border-inverse:     rgba(255, 255, 255, 0.14);
  --koronet-color-text-brand:         #121619;

  /* -------- BORDER WIDTH -------- */
  --koronet-border-width-xs: 1px;
  --koronet-border-width-sm: 1px;
  --koronet-border-width-md: 2px;
  --koronet-border-width-lg: 4px;

  /* -------- SHADOWS (Figma effects) -------- */
  --koronet-shadow-xs: 0 1px 2px 0 rgba(18, 22, 25, 0.04);
  --koronet-shadow-sm: 0 1px 2px 0 rgba(18, 22, 25, 0.06), 0 1px 3px 0 rgba(18, 22, 25, 0.08);
  --koronet-shadow-md: 0 4px 6px -1px rgba(18, 22, 25, 0.08), 0 2px 4px -2px rgba(18, 22, 25, 0.06);
  --koronet-shadow-lg: 0 10px 15px -3px rgba(18, 22, 25, 0.08), 0 4px 6px -4px rgba(18, 22, 25, 0.06);
  --koronet-shadow-xl: 0 20px 25px -5px rgba(18, 22, 25, 0.10), 0 8px 10px -6px rgba(18, 22, 25, 0.08);

  /* -------- MOTION -------- */
  --koronet-motion-base-fast: 100ms;
  --koronet-motion-base-base: 200ms;
  --koronet-motion-base-slow: 300ms;
  --koronet-motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* -------- BREAKPOINTS -------- */
  --koronet-breakpoint-sm:  640px;
  --koronet-breakpoint-md:  768px;
  --koronet-breakpoint-lg:  1024px;
  --koronet-breakpoint-xl:  1280px;
  --koronet-breakpoint-2xl: 1536px;
  --koronet-breakpoint-container: 1920px;
}

/* ---- Global base ---- */
html { font-family: var(--koronet-typography-fontFamily-sans); color: var(--koronet-color-text-primary); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { margin: 0; background: var(--koronet-color-background-primary); }
* { box-sizing: border-box; }