/* =============================================================================
   KOAST DESIGN SYSTEM — Colors & Type
   Light-first interface tokens for the Koast operating system.
   The product is light by default; dark mode is opt-in via [data-theme="dark"].
   ============================================================================= */

/* --- Fonts: Inter (Koast brand sans) + JetBrains Mono substitute for numerics --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* =========================================================================
     BRAND — Koast Indigo (violet-leaning)
     The signature color #404eed; supporting steps lean violet for warmth.
     ========================================================================= */
  --koast-50:  #eee9ff;
  --koast-100: #ddd5ff;
  --koast-200: #beb0ff;
  --koast-300: #9c84fd;
  --koast-400: #7858f8;
  --koast-500: #5d3df0;  /* in-app primary — buttons, focus, links */
  --koast-600: #404eed;  /* brand primary — logomark, key marketing */
  --koast-700: #3625b8;
  --koast-800: #2c1f8e;
  --koast-900: #261c6c;
  --koast-950: #160d44;

  /* =========================================================================
     SEMANTIC — Status & data signaling
     ========================================================================= */
  --success:     #17b26a;
  --success-bg:  #e7faf0;
  --success-fg:  #0e8f54;
  --success-border: #b6ecd0;

  --warning:     #f0ad4e;
  --warning-bg:  #fff5e1;
  --warning-fg:  #b8700f;
  --warning-border: #fbdfa4;

  --danger:      #ef4444;
  --danger-bg:   #fde9e9;
  --danger-fg:   #b91c1c;
  --danger-border: #f7c5c5;

  --info:        #0da2e7;
  --info-bg:     #e6f4fc;
  --info-fg:     #086e9e;
  --info-border: #b7dcf2;

  --learning:    #5561ff;
  --learning-bg: #eef0ff;
  --learning-fg: #3340c7;
  --learning-border:#c8cdfb;

  /* =========================================================================
     KANBAN STATUS COLORS — Creative pipeline columns
     ========================================================================= */
  --kanban-requested: #6b7280;
  --kanban-uploaded:  #8b5cf6;
  --kanban-review:    #f59e0b;
  --kanban-approved:  #17b26a;
  --kanban-published: #0da2e7;

  /* =========================================================================
     RANK / TROPHY COLORS — Top performer badges
     ========================================================================= */
  --rank-gold:   #f5b544;
  --rank-silver: #c9c9c9;
  --rank-bronze: #c08456;

  /* =========================================================================
     HIERARCHY TINTS — Campaign / Ad set / Ad
     ========================================================================= */
  --hier-campaign:        #7661ff;
  --hier-campaign-bg:     rgba(118, 97, 255, 0.10);
  --hier-campaign-border: rgba(118, 97, 255, 0.40);

  --hier-adset:           #0da2e7;
  --hier-adset-bg:        rgba(13, 162, 231, 0.10);
  --hier-adset-border:    rgba(13, 162, 231, 0.40);

  --hier-ad:              #1bc565;
  --hier-ad-bg:           rgba(27, 197, 101, 0.10);
  --hier-ad-border:       rgba(27, 197, 101, 0.40);

  /* =========================================================================
     CHART — Categorical data viz
     ========================================================================= */
  --chart-1: #5561ff;
  --chart-2: #17b26a;
  --chart-3: #f59e0b;
  --chart-4: #0da2e7;
  --chart-5: #ef4444;
  --chart-6: #8b5cf6;
  --chart-7: #06b6d4;
  --chart-8: #f97316;
  --chart-9: #ec4899;
  --chart-10:#14b8a6;
}

/* =============================================================================
   LIGHT THEME (default) — Product, dashboard, marketing
   ============================================================================= */
:root,
:root[data-theme="light"] {
  /* Surfaces */
  --bg-base:     #f4f5f9;   /* page background bottom layer */
  --bg-app:      #fbfcfe;   /* default app background */
  --bg-panel:    #ffffff;   /* sidebars, nav */
  --bg-surface:  #ffffff;   /* cards, tables — defaults */
  --bg-subtle:   #f6f7fa;   /* hover, striped rows */
  --bg-elevated: #ffffff;   /* popovers, menus, modals */
  --bg-overlay:  rgba(20, 22, 34, 0.45); /* modal backdrop */

  /* Foreground */
  --fg-1: #0b0d12;   /* primary headings, key numbers */
  --fg-2: #2e3340;   /* default body text */
  --fg-3: #5f6977;   /* secondary, helper, axis labels */
  --fg-4: #8f96a3;   /* placeholder, muted */
  --fg-5: #c5cad3;   /* hairline icons */

  /* Borders */
  --border-subtle: #f0f1f5;
  --border:        #e5e7ec;
  --border-strong: #d1d5db;
  --border-focus:  var(--koast-500);

  /* Primary action */
  --action:           var(--koast-600);
  --action-hover:     var(--koast-700);
  --action-press:     var(--koast-800);
  --action-fg:        #ffffff;
  --action-soft-bg:   #eef0ff;
  --action-soft-bg-h: #dde1ff;
  --action-soft-fg:   var(--koast-700);

  /* AI accent */
  --ai-accent:       #6d4ef6;
  --ai-accent-bg:    #efe9fe;
  --ai-accent-glow:  0 0 0 1px rgba(109, 78, 246, 0.16), 0 6px 20px -8px rgba(109, 78, 246, 0.20);

  /* Selection */
  --selection-bg: rgba(85, 97, 255, 0.18);
  --selection-fg: #0b0d12;

  /* Scrollbar */
  --scrollbar-thumb: rgba(0, 0, 0, 0.14);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.22);
}

/* =============================================================================
   DARK THEME — Opt-in for marketing hero, or future dark-mode app
   ============================================================================= */
:root[data-theme="dark"] {
  --bg-base:     #08090c;
  --bg-app:      #0b0d12;
  --bg-panel:    #11141b;
  --bg-surface:  #161922;
  --bg-subtle:   #11141b;
  --bg-elevated: #1c2030;
  --bg-overlay:  rgba(8, 9, 12, 0.72);

  --fg-1: #f3f4f8;
  --fg-2: #c9ccd6;
  --fg-3: #8a909e;
  --fg-4: #585e6e;
  --fg-5: #3a3f4d;

  --border-subtle: #1f2330;
  --border:        #262b3a;
  --border-strong: #353b4e;
  --border-focus:  var(--koast-500);

  --action:           var(--koast-500);
  --action-hover:     var(--koast-400);
  --action-press:     var(--koast-600);
  --action-fg:        #ffffff;
  --action-soft-bg:   rgba(85, 97, 255, 0.14);
  --action-soft-bg-h: rgba(85, 97, 255, 0.22);
  --action-soft-fg:   var(--koast-300);

  --ai-accent:       #a78bfa;
  --ai-accent-bg:    rgba(167, 139, 250, 0.12);
  --ai-accent-glow:  0 0 0 1px rgba(167, 139, 250, 0.35), 0 0 24px rgba(167, 139, 250, 0.18);

  --selection-bg: rgba(85, 97, 255, 0.30);
  --selection-fg: #ffffff;
}

/* =============================================================================
   TYPE — Inter (Koast brand) + JetBrains Mono
   ============================================================================= */
:root {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono",
               Menlo, Consolas, monospace;
  --font-display: var(--font-sans);

  /* Type scale */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  22px;
  --text-3xl:  28px;
  --text-4xl:  36px;
  --text-5xl:  48px;
  --text-6xl:  64px;

  /* Line heights */
  --leading-tight:  1.15;
  --leading-snug:   1.30;
  --leading-normal: 1.50;
  --leading-relaxed:1.65;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Tracking */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.06em;
}

/* =============================================================================
   SPACING / RADIUS / ELEVATION / MOTION
   ============================================================================= */
:root {
  --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 — the real Koast app uses generous radii (~12-16px on cards) */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;       /* buttons, inputs */
  --radius-lg: 12px;      /* default — cards, panels */
  --radius-xl: 16px;      /* feature cards */
  --radius-2xl: 20px;     /* large hero containers */
  --radius-pill: 999px;

  /* Elevation — light-mode tuned, soft, never blown out */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 1px rgba(15, 23, 42, 0.03);
  --shadow-md: 0 4px 8px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 24px -8px rgba(15, 23, 42, 0.12), 0 4px 8px -2px rgba(15, 23, 42, 0.06);
  --shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, 0.18), 0 8px 16px -4px rgba(15, 23, 42, 0.08);
  --shadow-tab: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
  --shadow-focus: 0 0 0 3px rgba(85, 97, 255, 0.20);
  --shadow-popover: 0 0 0 1px var(--border), 0 12px 32px -8px rgba(15, 23, 42, 0.18);

  /* Z-index hierarchy */
  --z-base:     0;
  --z-sticky:   100;
  --z-dropdown: 200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;
  --z-cmdk:     700;

  /* Motion */
  --ease-out:     cubic-bezier(0.16, 1, 0.30, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:     120ms;
  --dur-base:     180ms;
  --dur-slow:     260ms;
  --dur-modal:    320ms;
}

/* =============================================================================
   SEMANTIC TYPE PRESETS
   ============================================================================= */
.k-display-xl { font: var(--weight-bold) var(--text-6xl)/var(--leading-tight) var(--font-display); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.k-display    { font: var(--weight-bold) var(--text-5xl)/var(--leading-tight) var(--font-display); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.k-h1         { font: var(--weight-bold) var(--text-4xl)/var(--leading-tight) var(--font-display); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.k-h2         { font: var(--weight-semibold) var(--text-3xl)/var(--leading-snug) var(--font-display); letter-spacing: var(--tracking-snug); color: var(--fg-1); }
.k-h3         { font: var(--weight-semibold) var(--text-2xl)/var(--leading-snug) var(--font-sans); letter-spacing: var(--tracking-snug); color: var(--fg-1); }
.k-h4         { font: var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-sans); color: var(--fg-1); }
.k-h5         { font: var(--weight-semibold) var(--text-lg)/var(--leading-snug) var(--font-sans); color: var(--fg-1); }

.k-body-lg    { font: var(--weight-regular) var(--text-lg)/var(--leading-normal) var(--font-sans); color: var(--fg-2); }
.k-body       { font: var(--weight-regular) var(--text-md)/var(--leading-normal) var(--font-sans); color: var(--fg-2); }
.k-body-sm    { font: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-sans); color: var(--fg-2); }
.k-caption    { font: var(--weight-regular) var(--text-xs)/var(--leading-normal) var(--font-sans); color: var(--fg-3); }

.k-label      { font: var(--weight-medium) var(--text-sm)/1 var(--font-sans); color: var(--fg-2); }
.k-overline   { font: var(--weight-semibold) var(--text-xs)/1 var(--font-sans); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-3); }

.k-mono       { font: var(--weight-medium) var(--text-sm)/1.4 var(--font-mono); color: var(--fg-1); font-feature-settings: "tnum" 1, "zero" 1; }
.k-metric     { font: var(--weight-bold) var(--text-3xl)/1 var(--font-sans); color: var(--fg-1); letter-spacing: var(--tracking-tight); }
.k-metric-sm  { font: var(--weight-semibold) var(--text-xl)/1 var(--font-sans); color: var(--fg-1); }
.k-kbd        { font: var(--weight-medium) 11px/1 var(--font-mono); padding: 2px 6px; border-radius: 4px; background: var(--bg-subtle); border: 1px solid var(--border); color: var(--fg-3); }

/* =============================================================================
   BASE
   ============================================================================= */
html, body { background: var(--bg-app); color: var(--fg-2); font-family: var(--font-sans); font-size: var(--text-md); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: var(--selection-bg); color: var(--selection-fg); }
a { color: var(--koast-600); text-decoration: none; }
a:hover { color: var(--koast-700); }