/* ─────────────────────────────────────────────────────────────────────────
   TAW Design Tokens — Soft Modern SaaS theme
   Light values in :root · Dark overrides in html[data-theme="dark"]
   All components must read these vars — no hardcoded hex.
   ───────────────────────────────────────────────────────────────────────── */

:root {
    /* ── Radii ── (tight, applied globally) */
    --radius-card: 8px;   /* cards, panels, sections */
    --radius-md:   4px;   /* buttons, inputs, selects, dropdowns */
    --radius-sm:   4px;   /* chips, tags, small controls */
    --radius-pill: 4px;   /* badges, status chips (subtle, not pill) */

    /* ── Shadows ── */
    --shadow-sm:   0 1px 2px rgba(28,27,46,.05);
    --shadow-card: 0 1px 2px rgba(28,27,46,.04), 0 6px 20px rgba(28,27,46,.05);
    --shadow-pop:  0 8px 30px rgba(28,27,46,.14), 0 2px 8px rgba(28,27,46,.08);

    /* ── Surfaces ── */
    --color-canvas:    #e8e8ec;  /* page / body background only */
    --color-bg:        #ffffff;  /* card / panel / input surface */
    --color-surface-2: #f3f3f6;  /* section headers, hover, zebra, inset */
    --color-surface-3: #eaeaef;  /* deeper inset / track */

    /* Legacy aliases kept so existing components don't break during migration */
    --color-surface-hover:  var(--color-surface-2);
    --color-surface-active: var(--color-surface-2);

    /* ── Ink ── */
    --color-text:       #23222a;
    --color-text-2:     #56555f;
    --color-text-muted: #9b9aa4;
    --color-text-faint: #c4c3cc;

    /* ── Lines ── */
    --color-border:         #ececf1;
    --color-border-section: #ececf1;
    --color-border-solid:   #ececf1;  /* no more hard ink borders */
    --color-rule-soft:      #f2f2f6;

    /* ── Accent ── */
    --color-accent:      #ea5532;
    --color-accent-deep: #d2421f;
    --color-accent-soft: rgba(234,85,50,0.10);

    /* ── Inverted surface (dark badges, bulk bar, avatars) ── */
    --color-inverse:      #23222a;  /* dark in light, auto-flips in dark */
    --color-inverse-text: #ffffff;
    /* Legacy aliases */
    --color-panel-dark: var(--color-inverse);
    --color-panel-text: var(--color-inverse-text);

    /* ── Semantic status ── */
    --color-ok:         #3f9e5a;
    --color-ok-soft:    rgba(63,158,90,0.10);
    --color-amber:      #d99828;
    --color-amber-deep: #b97e16;
    --color-amber-soft: rgba(217,152,40,0.10);
    --color-info:       #5a8fc8;
    --color-info-soft:  rgba(90,143,200,0.10);
    --color-orange:     #ee7a36;
    --color-purple:     #8a6cc0;

    /* ── Fonts ── */
    --font-sans:    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

html[data-theme="dark"] {
    --color-canvas:    #141417;
    --color-bg:        #1e1e23;
    --color-surface-2: #26262d;
    --color-surface-3: #2d2d35;

    --color-text:       #f1f0f4;
    --color-text-2:     #b6b5bf;
    --color-text-muted: #85848f;
    --color-text-faint: #56555f;

    --color-border:         #2e2e36;
    --color-border-section: #2e2e36;
    --color-border-solid:   #2e2e36;
    --color-rule-soft:      #27272e;

    --color-accent:      #f06640;
    --color-accent-deep: #ea5532;
    --color-accent-soft: rgba(240,102,64,0.15);

    --color-inverse:      #f1f0f4;
    --color-inverse-text: #1e1e23;

    --color-ok:         #4faf6a;
    --color-ok-soft:    rgba(79,175,106,0.15);
    --color-amber:      #e7b04c;
    --color-amber-deep: #caa040;
    --color-amber-soft: rgba(231,176,76,0.15);
    --color-info:       #6fa0d8;
    --color-info-soft:  rgba(111,160,216,0.15);
    --color-orange:     #f08b4a;
    --color-purple:     #a184d4;

    --shadow-sm:   0 1px 2px rgba(0,0,0,.4);
    --shadow-card: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.3);
    --shadow-pop:  0 10px 34px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);
}

/* ── Font rendering — cross-platform smoothing ──────────────────────────── */
html {
    /* Force subpixel AA on Windows/Linux (ClearType equivalent in browsers).
       Without this, some browsers default to grayscale AA which looks thin. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    /* optimizeLegibility enables kerning, ligatures, and hint-driven hinting —
       the single biggest quality gain for Open Sans on non-retina Windows screens. */
    text-rendering: optimizeLegibility;

    /* macOS/iOS: disable subpixel AA in favour of greyscale AA — looks crisper
       at small sizes on HiDPI. On Windows/Linux this property has no effect. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Enable OpenType kern pairs and common ligatures.
       Open Sans is well-kerned; this activates those pairs. */
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;

    /* Optical sizing where available (variable fonts) */
    font-optical-sizing: auto;
}

/* Monospace: disable ligatures (would alter IOC/hash display) but keep kern */
.font-mono, [class*="font-mono"],
code, pre, kbd, samp {
    font-feature-settings: "kern" 1, "liga" 0, "calt" 0;
}

[x-cloak] { display: none !important; }

/* ── LED pulse indicators ── */
@keyframes led-pulse-pass {
    0%, 100% { box-shadow: 0 0 4px 1px rgba(34,197,94,0.5); }
    50%      { box-shadow: 0 0 8px 3px rgba(34,197,94,0.8); }
}
@keyframes led-pulse-fail {
    0%, 100% { box-shadow: 0 0 4px 1px var(--color-accent); }
    50%      { box-shadow: 0 0 8px 3px var(--color-accent); }
}
.led-pass { background-color: var(--color-ok); animation: led-pulse-pass 2s ease-in-out infinite; }
.led-fail { background-color: var(--color-accent); animation: led-pulse-fail 2s ease-in-out infinite; }
.led-skip { background-color: var(--color-surface-3); }
.led-info { background-color: var(--color-surface-3); }

@keyframes led-pulse-pending {
    0%, 100% { opacity: 0.2; }
    50%      { opacity: 0.6; }
}
.led-pending { background-color: var(--color-text-muted); animation: led-pulse-pending 1.5s ease-in-out infinite; }