/* --------------------------------------------------------------------------- * Spring Voyage — Colors & Type tokens * * The portal is the canonical surface. Dark is the default theme; * `.light` re-points every token. Tokens mirror * `src/Cvoya.Spring.Web/src/app/globals.css` one-for-one, plus extensions * for the marketing site, docs, and CLI terminal skin. * * Usage: * ← default * * --------------------------------------------------------------------------- */ :root, [data-theme="dark"] { /* ---- Surfaces ---- */ --sv-bg: #09090b; /* page canvas + meta theme-color */ --sv-fg: #fafafa; /* default text */ --sv-card: #0a0a0f; /* cards, dialogs, toasts, sidebar */ --sv-card-fg: #fafafa; --sv-popover: #0a0a0f; --sv-popover-fg: #fafafa; --sv-muted: #18181b; /* skeletons, tab list, 
      */
  --sv-muted-fg:           #a1a1aa;  /* labels, helper, timestamps      */
  --sv-accent:             #1e1e2e;  /* ghost/outline hover bg          */
  --sv-accent-fg:          #fafafa;
  --sv-secondary:          #1e1e2e;
  --sv-secondary-fg:       #fafafa;

  /* ---- Brand + action ---- */
  --sv-primary:            #3b82f6;  /* single blue — links, CTAs, active nav */
  --sv-primary-fg:         #fafafa;
  --sv-ring:               #3b82f6;  /* focus ring (== primary)          */

  /* ---- Borders + inputs ---- */
  --sv-border:             #27272a;
  --sv-input:              #27272a;

  /* ---- Status / severity ---- */
  --sv-success:            #22c55e;  /* Running, healthy                 */
  --sv-warning:            #eab308;  /* Starting, Stopping, degraded     */
  --sv-destructive:        #ef4444;  /* Error, delete                    */
  --sv-info:               #3b82f6;  /* Activity severity — Info         */
  --sv-debug:              #a1a1aa;  /* Activity severity — Debug        */

  /* ---- Brand-extension palette (marketing + logo-derived) ---- */
  --sv-voyage-cyan:        #5ee8ee;  /* halo ring from the logo          */
  --sv-voyage-cyan-soft:   #8ff4f7;
  --sv-blossom:            #f4b6c9;  /* cherry-blossom sail, body        */
  --sv-blossom-soft:       #ffd7e1;
  --sv-blossom-deep:       #d87a9a;
  --sv-starfield:          #0b1028;  /* deep night sky behind halo       */
  --sv-starfield-mid:      #182044;
  --sv-hull:               #0f1530;  /* the boat's dark hull             */

  /* ---- Terminal (CLI) skin ---- */
  --sv-term-bg:            #09090b;
  --sv-term-fg:            #e7e7ea;
  --sv-term-dim:           #71717a;
  --sv-term-prompt:        #5ee8ee;
  --sv-term-accent:        #3b82f6;
  --sv-term-success:       #22c55e;
  --sv-term-warning:       #eab308;
  --sv-term-error:         #ef4444;
  --sv-term-selection:     rgba(94, 232, 238, 0.18);

  /* ---- Radii (matches Tailwind theme) ---- */
  --sv-radius-sm:          0.25rem;   /* 4px  — chips, scrollbar thumb */
  --sv-radius-md:          0.375rem;  /* 6px  — buttons, inputs, nav   */
  --sv-radius-lg:          0.5rem;    /* 8px  — cards, dialogs, toasts */
  --sv-radius-full:        9999px;    /* badges, status dots           */

  /* ---- Shadows ---- */
  --sv-shadow-sm:          0 1px 2px 0 rgb(0 0 0 / 0.05);
  --sv-shadow-lg:          0 10px 15px -3px rgb(0 0 0 / 0.30), 0 4px 6px -4px rgb(0 0 0 / 0.25);
  --sv-shadow-xl:          0 20px 25px -5px rgb(0 0 0 / 0.40), 0 8px 10px -6px rgb(0 0 0 / 0.30);
  --sv-shadow-glow:        0 0 32px rgb(94 232 238 / 0.35); /* voyage halo */

  /* ---- Spacing (Tailwind defaults, named for clarity) ---- */
  --sv-space-1:            0.25rem;  /*  4  — icon-label in badges      */
  --sv-space-2:            0.5rem;   /*  8  — nav gap, button gap       */
  --sv-space-3:            0.75rem;  /* 12  — table cell padding        */
  --sv-space-4:            1rem;     /* 16  — card padding, grid gutter */
  --sv-space-6:            1.5rem;   /* 24  — dialog body, section stack */
  --sv-space-8:            2rem;     /* 32  — primary-CTA card padding  */
  --sv-space-14:           3.5rem;   /* 56  — mobile pane pt (clear fixed menu) */

  /* ---- Type ---- */
  --sv-font-sans:          "Geist", "Geist Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sv-font-mono:          "Geist Mono", "Geist Mono Variable", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  --sv-font-display:       "Geist", "Geist Variable", system-ui, sans-serif; /* same family, tighter tracking */

  --sv-text-10:            0.625rem; /* 10 — compact pill badges        */
  --sv-text-xs:            0.75rem;  /* 12 — helper, timestamps         */
  --sv-text-sm:            0.875rem; /* 14 — body, table cells, btn     */
  --sv-text-base:          1rem;     /* 16 — reserved                   */
  --sv-text-lg:            1.125rem; /* 18 — brand, dialog title, H2    */
  --sv-text-xl:            1.25rem;  /* 20 — marketing body             */
  --sv-text-2xl:           1.5rem;   /* 24 — page H1, stat values       */
  --sv-text-3xl:           1.875rem; /* 30 — marketing H2               */
  --sv-text-5xl:           3rem;     /* 48 — marketing hero             */
  --sv-text-7xl:           4.5rem;   /* 72 — marketing display (desktop) */

  --sv-weight-regular:     400;
  --sv-weight-medium:      500;
  --sv-weight-semibold:    600;
  --sv-weight-bold:        700;

  /* ---- Semantic text roles ---- */
  --sv-h1-size:            var(--sv-text-2xl);
  --sv-h1-weight:          var(--sv-weight-bold);
  --sv-h1-tracking:        -0.01em;

  --sv-h2-size:            var(--sv-text-lg);
  --sv-h2-weight:          var(--sv-weight-semibold);

  --sv-h3-size:            var(--sv-text-sm);
  --sv-h3-weight:          var(--sv-weight-semibold);

  --sv-body-size:          var(--sv-text-sm);
  --sv-body-weight:        var(--sv-weight-regular);
  --sv-body-leading:       1.55;

  --sv-helper-size:        var(--sv-text-xs);
  --sv-helper-color:       var(--sv-muted-fg);

  --sv-code-size:          var(--sv-text-xs);
  --sv-code-family:        var(--sv-font-mono);
}

[data-theme="light"] {
  --sv-bg:                 #ffffff;
  --sv-fg:                 #09090b;
  --sv-card:               #ffffff;
  --sv-card-fg:            #09090b;
  --sv-popover:            #ffffff;
  --sv-popover-fg:         #09090b;
  --sv-muted:              #f4f4f5;
  --sv-muted-fg:           #71717a;
  --sv-accent:             #f4f4f5;
  --sv-accent-fg:          #18181b;
  --sv-secondary:          #f4f4f5;
  --sv-secondary-fg:       #18181b;

  --sv-primary:            #2563eb;
  --sv-primary-fg:         #ffffff;
  --sv-ring:               #2563eb;

  --sv-border:             #e4e4e7;
  --sv-input:              #e4e4e7;

  --sv-success:            #16a34a;
  --sv-warning:            #ca8a04;
  --sv-destructive:        #dc2626;
  --sv-info:               #2563eb;
  --sv-debug:              #71717a;

  /* brand hues stay the same; only hulls soften in light */
  --sv-starfield:          #0b1028;
  --sv-starfield-mid:      #182044;
  --sv-hull:               #0f1530;
}

/* Terminal in light mode: most teams keep their terminal dark even when the
 * rest of the app is light. Default = dark terminal (tokens untouched).
 * Opt-in light skin: . */
[data-theme="light"][data-term="light"] {
  --sv-term-bg:            #fdf6e3;  /* solarized light base3 */
  --sv-term-fg:            #073642;  /* base02 */
  --sv-term-dim:           #93a1a1;  /* base1 */
  --sv-term-prompt:        #2aa198;  /* cyan */
  --sv-term-accent:        #268bd2;  /* blue */
  --sv-term-success:       #859900;  /* green */
  --sv-term-warning:       #b58900;  /* yellow */
  --sv-term-error:         #dc322f;  /* red */
  --sv-term-selection:     rgba(38, 139, 210, 0.18);
}

/* ---------------------------------------------------------------------------
 * Body + base element defaults
 * --------------------------------------------------------------------------- */

body {
  background: var(--sv-bg);
  color: var(--sv-fg);
  font-family: var(--sv-font-sans);
  font-size: var(--sv-body-size);
  line-height: var(--sv-body-leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Semantic type — these act as "utility classes" when you don't have
 * Tailwind. Components inside the portal should keep reaching through
 * Tailwind; marketing / docs use these directly. */

.sv-h1 {
  font-family: var(--sv-font-sans);
  font-size: var(--sv-h1-size);
  font-weight: var(--sv-h1-weight);
  letter-spacing: var(--sv-h1-tracking);
  line-height: 1.15;
}
.sv-h2 {
  font-size: var(--sv-h2-size);
  font-weight: var(--sv-h2-weight);
  line-height: 1.25;
}
.sv-h3 {
  font-size: var(--sv-h3-size);
  font-weight: var(--sv-h3-weight);
  line-height: 1;
  letter-spacing: -0.005em;
}
.sv-body  { font-size: var(--sv-body-size);  font-weight: var(--sv-body-weight); line-height: var(--sv-body-leading); }
.sv-helper{ font-size: var(--sv-helper-size); color: var(--sv-helper-color); }
.sv-code,
code, kbd, samp, pre {
  font-family: var(--sv-code-family);
  font-size: var(--sv-code-size);
}

/* Marketing-only display sizes (only used on spring-voyage.com pages). */
.sv-display     { font-family: var(--sv-font-display); font-size: clamp(2.5rem, 6vw, var(--sv-text-7xl)); font-weight: 700; letter-spacing: -0.025em; line-height: 1.02; }
.sv-lede        { font-size: var(--sv-text-xl); color: var(--sv-muted-fg); line-height: 1.5; max-width: 60ch; }

/* Focus — mirrors the `focus-visible:ring-2` convention */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--sv-bg), 0 0 0 4px var(--sv-ring);
  border-radius: var(--sv-radius-md);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}