@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;

  /* ─── Flow-canvas + log-viewer tokens (issue #669) ──────────────────
     Status palette for FlowCanvasOrganic bubbles (fill / ring / glyph
     / glow / edge / arrow). Keyed by JobStatus. Light-mode peers in
     the [data-theme="light"] block below. */
  --bubble-fill-pending:   #0D1726;
  --bubble-ring-pending:   rgba(148,163,184,0.45);
  --bubble-glyph-pending:  rgba(148,163,184,0.75);
  --bubble-glow-pending:   transparent;
  --bubble-edge-pending:   rgba(148,163,184,0.32);
  --bubble-arrow-pending:  rgba(148,163,184,0.60);

  --bubble-fill-running:   #0E1A33;
  --bubble-ring-running:   rgba(56,189,248,0.85);
  --bubble-glyph-running:  #BAE6FD;
  --bubble-glow-running:   rgba(56,189,248,0.30);
  --bubble-edge-running:   rgba(56,189,248,0.65);
  --bubble-arrow-running:  #38BDF8;

  /* Issue #669 — succeeded bubbles MUST read as "done" at a glance.
     Solid green fill, white tick. Was: dark fill #0F1F18 with green
     glyph, which read identically to pending at a glance. */
  --bubble-fill-succeeded: #16A34A;
  --bubble-ring-succeeded: rgba(22,163,74,0.95);
  --bubble-glyph-succeeded: #FFFFFF;
  --bubble-glow-succeeded: rgba(74,222,128,0.20);
  --bubble-edge-succeeded: rgba(74,222,128,0.55);
  --bubble-arrow-succeeded: #4ADE80;

  --bubble-fill-failed:    #23070A;
  --bubble-ring-failed:    rgba(248,113,113,0.85);
  --bubble-glyph-failed:   #FCA5A5;
  --bubble-glow-failed:    rgba(248,113,113,0.30);
  --bubble-edge-failed:    rgba(248,113,113,0.65);
  --bubble-arrow-failed:   #F87171;

  /* Bubble label (text below the bubble). Dark default = white-ish;
     light peer flips to slate-900 for AA on white background. */
  --bubble-label:          rgba(255,255,255,0.85);
  --bubble-sublabel:       rgba(255,255,255,0.45);

  /* Log viewer surface — was hardcoded #0D1117 in ExecutionLogs.tsx. */
  --log-viewer-bg:         #0D1117;
  --log-viewer-text:       #c9d1d9;
  --log-viewer-text-dim:   rgba(139,148,158,0.85);
  --log-viewer-text-num:   rgba(139,148,158,0.7);
  --log-viewer-empty:      rgba(201,209,217,0.55);
  --log-line-focused-bg:   rgba(56,139,253,0.18);

  /* Log search bar (issue #669 round 2). */
  --log-search-bg:               rgba(13,17,23,0.5);
  --log-search-input-bg:         rgba(13,17,23,0.85);
  --log-search-input-text:       #c9d1d9;
  --log-search-input-placeholder:rgba(148,163,184,0.55);
  --log-search-icon:             rgba(148,163,184,0.6);
  --log-search-nav-hover:        rgba(148,163,184,0.10);
  --log-search-pill-text:        rgba(148,163,184,0.7);
  --log-search-pill-regex-bg:    rgba(192,132,252,0.15);
  --log-search-pill-regex-fg:    #C084FC;
  --log-search-pill-regex-border:rgba(192,132,252,0.45);
  --log-search-level-info-bg:     rgba(56,139,253,0.18);
  --log-search-level-info-fg:     #79b8ff;
  --log-search-level-info-border: rgba(56,139,253,0.45);
  --log-search-level-warn-bg:     rgba(245,158,11,0.18);
  --log-search-level-warn-fg:     #f59e0b;
  --log-search-level-warn-border: rgba(245,158,11,0.45);
  --log-search-level-error-bg:    rgba(248,81,73,0.18);
  --log-search-level-error-fg:    #f85149;
  --log-search-level-error-border:rgba(248,81,73,0.45);
  --log-search-level-debug-bg:    rgba(148,163,184,0.18);
  --log-search-level-debug-fg:    #94a3b8;
  --log-search-level-debug-border:rgba(148,163,184,0.45);
}

/* 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 ─────────────────────────────────────────────── */
/* Every dark-default token in the @theme blocks above gets a light-mode
   peer below so a single attribute flip on `<html data-theme="light">`
   re-skins both the wizard surface AND the Sovereign console surface
   (PortalShell + Apps + Jobs + AppDetail).
   AA contrast is documented per token:
     • body text (--color-text on --color-bg)              ≥ 7:1
     • dim text  (--color-text-dim on --color-bg)          ≥ 4.5:1
     • borders   (--color-border on --color-bg)            ≥ 1.5:1
     • danger / warn / success text                         ≥ 4.5:1
   Violating any of these is a regression, not a refinement. */
[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;

  /* ── Console tokens — light peers of the dark-first console
        surface defined in the @theme block above. Mirrors the
        same role names so PortalShell / Apps / Jobs / AppDetail
        all flip in lockstep. AA-or-better contrast against
        --color-bg = #ffffff:
          --color-text         #0f172a  21:1
          --color-text-dim     #475569  7.4:1
          --color-text-dimmer  #64748b  4.7:1
          --color-text-strong  #020617  21:1+
          --color-accent       #2563eb  4.7:1 vs #ffffff
          --color-warn         #b45309  4.7:1
          --color-danger       #b91c1c  6.0:1
          --color-success      #047857  4.6:1 */
  --color-bg:            #ffffff;
  --color-bg-2:          #f8fafc;
  --color-surface:       #ffffff;
  --color-surface-hover: #f1f5f9;
  --color-border:        #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-text:          #0f172a;
  --color-text-strong:   #020617;
  --color-text-dim:      #475569;
  --color-text-dimmer:   #64748b;
  --color-accent:        #2563eb;
  --color-accent-hover:  #1d4ed8;
  --color-warn:          #b45309;
  --color-danger:        #b91c1c;

  /* Console --color-success light peer — emerald-700 keeps the
     dark-mode green semantic while clearing 4.5:1 against
     #ffffff bg (the dark default #10b981 is 1.6:1, AA-failing). */
  --color-success: #047857;

  /* ─── Flow-canvas light peers (issue #669) ─────────────────────────
     Bubble fills go pale tint instead of dark surface so glyph + ring
     stay readable on a white page. Ring + glyph use AA-clearing
     foregrounds. Edges + glows soften to keep the canvas light. */
  --bubble-fill-pending:    #F1F5F9;
  --bubble-ring-pending:    #94A3B8;
  --bubble-glyph-pending:   #475569;
  --bubble-glow-pending:    transparent;
  --bubble-edge-pending:    rgba(100,116,139,0.45);
  --bubble-arrow-pending:   #64748B;

  --bubble-fill-running:    #DBEAFE;
  --bubble-ring-running:    #2563EB;
  --bubble-glyph-running:   #1E3A8A;
  --bubble-glow-running:    rgba(37,99,235,0.20);
  --bubble-edge-running:    rgba(37,99,235,0.65);
  --bubble-arrow-running:   #2563EB;

  --bubble-fill-succeeded:  #16A34A;
  --bubble-ring-succeeded:  rgba(22,163,74,0.95);
  --bubble-glyph-succeeded: #FFFFFF;
  --bubble-glow-succeeded:  rgba(22,163,74,0.20);
  --bubble-edge-succeeded:  rgba(22,163,74,0.65);
  --bubble-arrow-succeeded: #16A34A;

  --bubble-fill-failed:     #FEE2E2;
  --bubble-ring-failed:     #B91C1C;
  --bubble-glyph-failed:    #7F1D1D;
  --bubble-glow-failed:     rgba(185,28,28,0.20);
  --bubble-edge-failed:     rgba(185,28,28,0.65);
  --bubble-arrow-failed:    #B91C1C;

  --bubble-label:           #0F172A;
  --bubble-sublabel:        #64748B;

  /* Log viewer light peer — bright surface, AA-clearing text. */
  --log-viewer-bg:          #F8FAFC;
  --log-viewer-text:        #0F172A;
  --log-viewer-text-dim:    #475569;
  --log-viewer-text-num:    #94A3B8;
  --log-viewer-empty:       #64748B;
  --log-line-focused-bg:    rgba(37,99,235,0.12);

  /* Log search bar light peers (issue #669 round 2). All FG values
   * AA-clearing on the white search bar bg. */
  --log-search-bg:               #F1F5F9;
  --log-search-input-bg:         #FFFFFF;
  --log-search-input-text:       #0F172A;
  --log-search-input-placeholder:#94A3B8;
  --log-search-icon:             #64748B;
  --log-search-nav-hover:        rgba(15,23,42,0.06);
  --log-search-pill-text:        #475569;
  --log-search-pill-regex-bg:    rgba(124,58,237,0.10);
  --log-search-pill-regex-fg:    #7C3AED;
  --log-search-pill-regex-border:rgba(124,58,237,0.45);
  --log-search-level-info-bg:     rgba(37,99,235,0.10);
  --log-search-level-info-fg:     #1D4ED8;
  --log-search-level-info-border: rgba(37,99,235,0.45);
  --log-search-level-warn-bg:     rgba(180,83,9,0.10);
  --log-search-level-warn-fg:     #B45309;
  --log-search-level-warn-border: rgba(180,83,9,0.45);
  --log-search-level-error-bg:    rgba(185,28,28,0.10);
  --log-search-level-error-fg:    #B91C1C;
  --log-search-level-error-border:rgba(185,28,28,0.45);
  --log-search-level-debug-bg:    rgba(71,85,105,0.10);
  --log-search-level-debug-fg:    #475569;
  --log-search-level-debug-border:rgba(71,85,105,0.45);

  /* 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);
  }
}
