/* ==========================================================================
   kamal·ui — Design Tokens
   --------------------------------------------------------------------------
   The single source of truth for color, space, type, radius, shadow and
   z-index. A warm, friendly system: cool teal accent on a warm ivory canvas,
   inspired by the teal-lotus mark. Light tokens are the default; a warm-dark
   theme overrides the semantic role tokens via prefers-color-scheme.
   Everything downstream consumes these variables — re-theming means editing
   only this file.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ---- Warm neutral ramp (ivory → warm charcoal) --------------------- */
  /* Genuinely WARM ivory/cream: red >= green > blue at every step, so the
     canvas reads like warm paper (a touch of yellow-warmth), not cool mint.
     Cards stay crisp near-white; the canvas is a soft ~#f7f4ec cream. */
  --warm-0:   #fffdf9;   /* card / elevated surface (warm near-white)      */
  --warm-25:  #fbf8f1;
  --warm-50:  #f7f4ec;   /* the canvas — warm ivory cream                  */
  --warm-100: #efe9dd;
  --warm-150: #e7e1d3;   /* soft warm borders                              */
  --warm-200: #ddd5c4;
  --warm-300: #cabfaa;
  --warm-400: #a69e8c;   /* faint text                                     */
  --warm-500: #827b6c;   /* subtle text                                    */
  --warm-600: #6a645a;   /* muted text                                     */
  --warm-700: #4b463e;
  --warm-800: #34302a;
  --warm-900: #23201d;   /* warm near-black text                           */
  --warm-950: #1a1714;

  /* Warm charcoals for the dark theme (NOT cold blue-black) */
  --dark-canvas:  #181613;
  --dark-surface: #211f1b;
  --dark-raised:  #2a2722;
  --dark-sunken:  #131210;
  --dark-border:  #36322b;
  --dark-border-strong: #454037;

  /* ---- Accent: the teal lotus --------------------------------------- */
  --teal-50:  #e4f5f4;   /* soft tint for badges / backgrounds            */
  --teal-100: #c7ebe9;
  --teal-200: #9ddedb;
  --teal-300: #5ccdc7;   /* seafoam                                       */
  --teal-400: #2bb3b3;
  --teal-500: #12a0a7;   /* signature teal                                */
  --teal-600: #0d8b96;   /* hover — a touch deeper                        */
  --teal-700: #0c6d91;   /* deep teal-blue                               */
  --teal-800: #0a5570;

  /* ---- Raw semantic hues (warmed, intentional — not bootstrap) ------- */
  --green-50:#e7f4ec; --green-500:#3a9d6e; --green-600:#2f8a5e; --green-700:#236b49;
  --amber-50:#fbf0db; --amber-500:#cf8a2c; --amber-600:#b3741e; --amber-700:#8a5a16;
  --red-50:  #fbeae6; --red-500:  #d4583f; --red-600:  #bd4631; --red-700:  #963626;

  /* ---- Semantic role tokens (light) ---------------------------------- */
  --bg:            var(--warm-50);
  --bg-elevated:   var(--warm-0);
  --bg-sunken:     var(--warm-100);
  --bg-inset:      var(--warm-100);
  --surface:       var(--warm-0);
  --surface-hover: var(--warm-50);

  --border:        var(--warm-150);
  --border-strong: var(--warm-200);
  --border-faint:  var(--warm-100);

  --text:          var(--warm-900);
  --text-muted:    var(--warm-600);
  --text-subtle:   var(--warm-500);
  --text-faint:    var(--warm-400);
  --text-inverse:  var(--warm-0);

  --accent:        var(--teal-500);
  /* accent-hover doubles as the small-label teal (TLS badge, ports, service
     dest, active nav) — all sit on --accent-soft, so it's deepened to teal-700
     to clear WCAG AA (≈5.2:1) for that text without muddying the chips. */
  --accent-hover:  var(--teal-700);
  --accent-fg:     #ffffff;
  --accent-soft:   var(--teal-50);
  --accent-300:    var(--teal-300);   /* lighter accent (log "info", focus tints) */

  /* Status: foreground (text/dot), border, and soft background.
     Light fgs are the -700 tier so the small pill text clears WCAG AA (4.5:1)
     on its pastel fill over warm cream (measured: ok 5.7, warn 5.2, bad 6.3,
     neutral 4.8). Dark theme overrides these below. */
  --ok-fg:    var(--green-700);  --ok-bg:    var(--green-50);  --ok-bd:    #bfe0cb;
  --warn-fg:  var(--amber-700);  --warn-bg:  var(--amber-50); --warn-bd:  #ecd3a0;
  --bad-fg:   var(--red-700);    --bad-bg:   var(--red-50);   --bad-bd:   #eec3b8;
  --neutral-fg: var(--warm-600); --neutral-bg: var(--warm-100); --neutral-bd: var(--warm-200);

  /* Terminal / log panel — a warm, deep ink (not pure black) */
  --term-bg:   #1b1916;
  --term-text: #e6e1d6;
  --term-dim:  #948d7e;
  --term-line: #2a2722;

  /* ---- Spacing scale (4px base) -------------------------------------- */
  --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;

  /* ---- Radius (larger, softer) --------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ---- Type scale (bigger, friendlier) ------------------------------- */
  --font-sans: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
               "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code",
               Menlo, Consolas, "Liberation Mono", monospace;

  --text-2xs: 11.5px;
  --text-xs:  12.5px;
  --text-sm:  13.5px;
  --text-md:  15px;
  --text-lg:  17px;
  --text-xl:  22px;
  --text-2xl: 30px;
  --text-3xl: 40px;

  --leading-tight:  1.2;
  --leading-normal: 1.55;
  --leading-loose:  1.7;

  --weight-normal:  400;
  --weight-medium:  520;
  --weight-semibold:640;
  --weight-bold:    720;

  --tracking-tight: -0.012em;
  --tracking-wide:  0.05em;

  /* ---- Shadows (soft + warm, like paper on a desk) ------------------- */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(60, 50, 30, 0.05);
  --shadow-sm: 0 1px 2px rgba(60, 50, 30, 0.05), 0 2px 6px rgba(60, 50, 30, 0.04);
  --shadow-md: 0 2px 4px rgba(60, 50, 30, 0.05), 0 8px 20px rgba(60, 50, 30, 0.06);
  --shadow-pop: 0 8px 30px rgba(50, 40, 25, 0.14), 0 2px 6px rgba(50, 40, 25, 0.08);
  --ring: 0 0 0 3px var(--accent-soft);

  /* ---- Page wash (body::before) ---------------------------------------*/
  /* Light: a barely-there WARM ivory glow — NOT teal — so the canvas reads as
     warm paper in a lit room, with no cool/mint cast. Teal stays an accent. */
  --page-wash:
    radial-gradient(1000px 560px at 88% -10%, color-mix(in srgb, var(--warm-300) 26%, transparent), transparent 72%),
    radial-gradient(820px 480px at -6% 2%, color-mix(in srgb, var(--warm-200) 30%, transparent), transparent 74%);

  /* ---- Layout ---------------------------------------------------------*/
  --topbar-h: 60px;
  --content-max: 1180px;

  /* ---- Z-index --------------------------------------------------------*/
  --z-base:    0;
  --z-sticky:  100;
  --z-topbar:  200;
  --z-dropdown:300;
  --z-toast:   400;

  /* ---- Motion ---------------------------------------------------------*/
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 100ms;
  --dur:      170ms;
}

/* ==========================================================================
   Dark theme — warm charcoal, teal lightened for contrast.
   Overrides only the semantic role tokens.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:            var(--dark-canvas);
    --bg-elevated:   var(--dark-surface);
    --bg-sunken:     var(--dark-sunken);
    --bg-inset:      var(--dark-raised);
    --surface:       var(--dark-surface);
    --surface-hover: var(--dark-raised);

    --border:        var(--dark-border);
    --border-strong: var(--dark-border-strong);
    --border-faint:  #2b2823;

    --text:          #f1ede3;
    --text-muted:    #b3ac9d;
    --text-subtle:   #8f897b;
    /* Nudged brighter: this also drives chart axis tick labels (the bar-chart
       Y-axis container ids), which were too dim to read on the dark canvas. */
    --text-faint:    #847e6f;
    --text-inverse:  var(--dark-canvas);

    /* Subtle warm lift over the dark canvas (kept gentle — the dark theme reads
       well as-is). */
    --page-wash:
      radial-gradient(1000px 560px at 88% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 72%),
      radial-gradient(820px 480px at -6% 2%, color-mix(in srgb, var(--teal-700) 12%, transparent), transparent 74%);

    --accent:        var(--teal-300);
    --accent-hover:  var(--teal-200);
    --accent-fg:     #0a2a2c;
    --accent-soft:   rgba(92, 205, 199, 0.15);

    --ok-fg:    #57c98c; --ok-bg:    rgba(58,157,110,0.16);  --ok-bd:    rgba(58,157,110,0.34);
    --warn-fg:  #e0a64e; --warn-bg:  rgba(207,138,44,0.16);  --warn-bd:  rgba(207,138,44,0.34);
    --bad-fg:   #e57a60; --bad-bg:   rgba(212,88,63,0.17);   --bad-bd:   rgba(212,88,63,0.36);
    --neutral-fg: #9b9486; --neutral-bg: var(--dark-raised); --neutral-bd: var(--dark-border-strong);

    --term-bg:   #131210;
    --term-text: #e6e1d6;
    --term-dim:  #847e70;
    --term-line: #262320;

    --shadow-xs: 0 1px 2px rgba(0,0,0,0.30);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.32), 0 2px 6px rgba(0,0,0,0.28);
    --shadow-md: 0 2px 4px rgba(0,0,0,0.32), 0 10px 24px rgba(0,0,0,0.4);
    --shadow-pop:0 10px 34px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.45);
    --ring: 0 0 0 3px var(--accent-soft);
  }
}