@import "tailwindcss";

@theme {
  /* Catalyst brand — sky blue (per openova.io design system) */
  --color-brand-300: #BAE6FD;
  --color-brand-400: #7DD3FC;
  --color-brand-500: #38BDF8;
  --color-brand-600: #0EA5E9;
  --color-brand-700: #0284C7;

  /* Surfaces — dark-first, matching openova.io */
  --color-surface-0: #09090B;
  --color-surface-1: #111113;
  --color-surface-2: #18181B;
  --color-surface-3: #27272A;
  --color-surface-border: #27272A;
  --color-surface-border-hover: #3F3F46;

  /* Semantic text tokens */
  --color-text-primary: #FAFAFA;
  --color-text-secondary: #A1A1AA;
  --color-text-muted: #71717A;
  --color-text-disabled: #3F3F46;

  /* Status */
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error:   #EF4444;
  --color-info:    #38BDF8;

  /* Typography */
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  /* Motion */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── Console tokens (pixel-port from core/console/src/styles/global.css) ───
     The Sovereign-provision portal mirrors core/console 1:1, so we expose
     the same `--color-*` token surface the canonical Svelte components
     reference. Values are copied verbatim from
     /home/openova/repos/openova/core/console/src/styles/global.css —
     adding new tokens or changing values requires updating both ends.
     Where a name collides with the existing wizard surface palette
     (e.g. `--color-success`), the console value wins for Apps/Jobs
     pages. The wizard's older surfaces never read these tokens. */
  --color-bg: #0b1220;
  --color-bg-2: #111827;
  --color-surface: #111827;
  --color-surface-hover: #1a2332;
  --color-border: #1f2937;
  --color-border-strong: #374151;
  --color-text: #e5e7eb;
  --color-text-strong: #ffffff;
  --color-text-dim: #9ca3af;
  --color-text-dimmer: #6b7280;
  --color-accent: #3b82f6;
  --color-accent-hover: #2563eb;
  --color-warn: #f59e0b;
  --color-danger: #ef4444;
}

/* Console-token override for `--color-success` — the wizard surface
   used #22C55E (matches openova.io); core/console uses #10b981 emerald.
   For Apps/Jobs/AppDetail pixel parity we adopt the console value. */
@theme {
  --color-success: #10b981;
}

/* ─── Wizard theme channels ────────────────────────────────────────────── */
/* rgba(var(--wiz-ch), opacity) flips white↔black automatically            */
:root {
  --wiz-ch:         255, 255, 255;   /* fg channel — white in dark mode  */
  --wiz-accent-ch:  59, 130, 246;    /* SME blue-500 — unified accent   */
  --wiz-accent:     rgba(59,130,246,0.9); /* accent text (links, labels) */
  --wiz-success-ch: 16, 185, 129;    /* SME emerald — unified success   */
  --wiz-page-bg:    #0b1220;         /* flat dark — matches SME */
  --wiz-panel-bg:   #111827;         /* surface — matches SME */
  --wiz-deep-bg:    #1a1a1a;
  --wiz-glow-1:     rgba(56,189,248,0.06);
  --wiz-glow-2:     rgba(129,140,248,0.05);

  /* ── Semantic text tokens (dark defaults) ──────────────────────── */
  --wiz-text-hi:    rgba(255,255,255,0.88);  /* headings, active labels  */
  --wiz-text-md:    rgba(255,255,255,0.65);  /* body copy, labels        */
  --wiz-text-lo:    rgba(255,255,255,0.5);   /* secondary body           */
  --wiz-text-sub:   rgba(255,255,255,0.35);  /* subtext, taglines        */
  --wiz-text-hint:  rgba(255,255,255,0.2);   /* hints, placeholders      */

  /* ── Semantic border tokens ───────────────────────────────────── */
  --wiz-border:     rgba(255,255,255,0.1);   /* visible input/card border */
  --wiz-border-sub: rgba(255,255,255,0.06);  /* subtle dividers           */

  /* ── Semantic background tokens ──────────────────────────────── */
  --wiz-bg-input:   rgba(255,255,255,0.05);  /* input / control bg       */
  --wiz-bg-card:    rgba(255,255,255,0.04);  /* card / section bg        */
  --wiz-bg-sub:     rgba(255,255,255,0.025); /* subtle area bg           */
  --wiz-bg-xs:      rgba(255,255,255,0.02);  /* near-transparent tint    */

  /* ── Card shadow ─────────────────────────────────────────────── */
  --wiz-card-shadow: 0 32px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ─── Light mode overrides ─────────────────────────────────────────────── */
[data-theme="light"] {
  --color-surface-0: #FFFFFF;
  --color-surface-1: #F4F4F5;
  --color-surface-2: #E4E4E7;
  --color-surface-3: #D4D4D8;
  --color-surface-border: #D4D4D8;
  --color-surface-border-hover: #A1A1AA;

  --color-brand-300: #0284C7;
  --color-brand-400: #0EA5E9;
  --color-brand-500: #0284C7;
  --color-brand-600: #0369A1;
  --color-brand-700: #075985;

  --color-text-primary:   #09090B;
  --color-text-secondary: #52525B;
  --color-text-muted:     #A1A1AA;
  --color-text-disabled:  #D4D4D8;

  /* Wizard theme channels — light overrides */
  --wiz-ch:         0, 0, 0;
  --wiz-accent-ch:  37, 99, 235;    /* SME blue-600 — unified accent   */
  --wiz-accent:     #2563eb;        /* SME accent-strong (WCAG AA ✓)  */
  --wiz-success-ch: 5, 150, 105;    /* SME emerald-600 on light       */
  --wiz-page-bg:    #f8fafc;  /* flat light — matches SME */
  --wiz-panel-bg:   #ffffff;  /* card white — matches SME */
  --wiz-deep-bg:    #f1f5f9;
  --wiz-glow-1:     rgba(2,132,199,0.08);
  --wiz-glow-2:     rgba(99,102,241,0.05);

  /* ── Semantic text tokens — WCAG AA calibrated for white bg ──── */
  /* Aligned with SME's light palette for visual unity              */
  --wiz-text-hi:    #0f172a;   /* 21:1 — SME text-strong            */
  --wiz-text-md:    #475569;   /* 7:1  — SME text-dim               */
  --wiz-text-lo:    #64748b;   /* 4.7:1 — SME text-dimmer           */
  --wiz-text-sub:   #64748b;   /* 4.7:1 — unified with SME          */
  --wiz-text-hint:  #94a3b8;   /* 2.8:1 — hints                     */

  /* ── Semantic border tokens ───────────────────────────────────── */
  --wiz-border:     #e2e8f0;   /* SME border slate-200              */
  --wiz-border-sub: #f1f5f9;   /* SME border-subtle slate-100       */

  /* ── Semantic background tokens ──────────────────────────────── */
  --wiz-bg-input:   #f8fafc;   /* input / control bg                 */
  --wiz-bg-card:    #ffffff;   /* card bg = white in Option B        */
  --wiz-bg-sub:     #f4f6f8;   /* subtle area bg                     */
  --wiz-bg-xs:      #f9fafb;   /* near-white tint                    */

  /* ── Card shadow — airy for light mode ───────────────────────── */
  --wiz-card-shadow: 0 2px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.9);
}

/* ─── Base ─────────────────────────────────────────────────────────────── */
@layer base {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  body {
    background-color: var(--color-surface-0);
    color: var(--color-text-secondary);
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    line-height: 1.6;
    min-height: 100dvh;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--color-surface-border);
    border-radius: 9999px;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--color-surface-border-hover); }

  :focus-visible {
    outline: 2px solid var(--color-brand-500);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  ::selection {
    background-color: color-mix(in srgb, var(--color-brand-500) 25%, transparent);
  }
}

/* ─── Utilities ─────────────────────────────────────────────────────────── */
@layer utilities {
  .text-balance { text-wrap: balance; }
  .scrollbar-none { scrollbar-width: none; }
  .scrollbar-none::-webkit-scrollbar { display: none; }

  .glass {
    background: color-mix(in srgb, var(--color-surface-2) 80%, transparent);
    backdrop-filter: blur(12px);
    border: 1px solid var(--color-surface-border);
  }

  .glow-brand {
    box-shadow: 0 0 24px color-mix(in srgb, var(--color-brand-500) 30%, transparent);
  }
}
