/* ==========================================================================
   CasePloy — Foundations
   Design tokens, reset, typography, layout helpers.
   Every value used anywhere in the product should come from a token here.
   ========================================================================== */

:root {
    /* ---- Surfaces (lightest to deepest) ---- */
    --bg:            #ffffff;
    --surface-1:     #ffffff;
    --surface-2:     #f5f7fb;
    --surface-3:     #edf1f8;
    --canvas:        #fcfcfe;   /* the app's page ground: a whisper off white, no more (the user's call) */
    --surface-4:     #e2e8f2;

    /* ---- Ink alpha ladder ----
       Alpha rather than solid hex, so borders and fills composite correctly over
       cards, selected rows and nested surfaces. Steps mirror Radix's gray-a scale. */
    --ink-2:         rgba(13, 18, 32, 0.024);  /* faintest tint  */
    --ink-3:         rgba(13, 18, 32, 0.055);  /* hover fill     */
    --ink-4:         rgba(13, 18, 32, 0.09);   /* pressed fill   */
    --border:        rgba(13, 18, 32, 0.12);   /* default border */
    --border-strong: rgba(13, 18, 32, 0.19);   /* hover border   */
    --border-loud:   rgba(13, 18, 32, 0.28);   /* strong border  */

    /* ---- Text ---- */
    --text:          #0d1220;
    --text-muted:    #5b6480;
    --text-faint:    #8b93a7;
    --text-inverse:  #ffffff;

    /* ---- Brand — sampled from the logo mark: #004efc → #006dfc → #07a8fc ---- */
    --accent:        #006dfc;
    --accent-hover:  #004efc;
    --accent-active: #0040d6;
    --accent-bright: #07a8fc;
    --accent-soft:   rgba(0, 109, 252, 0.10);
    --accent-text:   #0058e0;   /* a step darker so link text clears 4.5:1 on white */
    --on-accent:     #ffffff;

    /* The logo's own gradient. Surfaces run light→dark corner to corner like the
       mark; text runs dark→light left to right. The light end is held to a small
       corner on surfaces so white labels stay readable over it. */
    --brand-gradient:      linear-gradient(135deg, #07a8fc 0%, #006dfc 38%, #004efc 100%);
    --brand-gradient-text: linear-gradient(92deg, #004efc 0%, #006dfc 48%, #07a8fc 100%);

    /* ---- Status (darkened so they pass contrast on light surfaces) ---- */
    --success:       #0f9d63;
    --success-soft:  rgba(15, 157, 99, 0.12);
    --warning:       #b0771a;
    --warning-soft:  rgba(176, 119, 26, 0.13);
    --danger:        #d92d3c;
    --danger-soft:   rgba(217, 45, 60, 0.10);
    --info:          #0f7fc4;
    --info-soft:     rgba(15, 127, 196, 0.11);

    /* ---- Contextual tints ---- */
    --hover-tint:    var(--ink-3);
    --sunken-tint:   var(--ink-2);
    --contrast-bg:   #0d1220;
    --contrast-text: #ffffff;
    --contrast-hover:#232a3d;

    /* ---- Radius (sharp — this product does not use pills) ---- */
    --r-sm:   4px;
    --r-md:   6px;
    --r-lg:   8px;
    --r-xl:  12px;
    --r-2xl: 16px;
    --r-full: 999px;   /* avatars and dots only */

    /* ---- Spacing scale (4px base) ---- */
    --s-1:  4px;
    --s-2:  8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-8: 32px;
    --s-10: 40px;
    --s-12: 48px;
    --s-16: 64px;
    --s-20: 80px;

    /* ---- Type ---- */
    --font-sans: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

    --text-xs:   11.5px;
    --text-sm:   13px;
    --text-base: 14.5px;
    --text-md:   16px;
    --text-lg:   19px;
    --text-xl:   24px;
    --text-2xl:  30px;
    --text-3xl:  38px;
    --text-4xl:  48px;

    /* ---- Elevation ----
       Hairlines and stacked short-blur layers. A single wide soft blur on a
       resting surface is the giveaway of an unconsidered UI. */
    --shadow-sm: 0 1px 2px rgba(13, 18, 32, 0.05);
    --shadow-md: 0 1px 2px rgba(13, 18, 32, 0.06),
                 0 2px 6px -2px rgba(13, 18, 32, 0.08);
    --shadow-lg: 0 1px 2px rgba(13, 18, 32, 0.06),
                 0 8px 16px -6px rgba(13, 18, 32, 0.10),
                 0 16px 32px -12px rgba(13, 18, 32, 0.10);
    --shadow-xl: 0 1px 2px rgba(13, 18, 32, 0.07),
                 0 12px 24px -8px rgba(13, 18, 32, 0.12),
                 0 32px 64px -24px rgba(13, 18, 32, 0.16);
    --shadow-glow: 0 1px 2px rgba(0, 109, 252, 0.22),
                   0 4px 12px -4px rgba(0, 109, 252, 0.38);

    /* ---- Motion ---- */
    --dur-fast: 0.12s;
    --dur: 0.18s;
    --dur-slow: 0.45s;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    /* Decelerating — for things entering the screen */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* ---- Layout ---- */
    --container: 1200px;
}

/* ==========================================================================
   Dark theme — opt in with <html data-theme="dark">.
   Only the values that change are redefined; the scales above are shared.
   ========================================================================== */
:root[data-theme="dark"] {
    --bg:            #08090b;
    --surface-1:     #0e1015;
    --surface-2:     #14171d;
    --surface-3:     #1b1f27;
    --canvas:        #0b0d11;
    --surface-4:     #232833;

    --ink-2:         rgba(255, 255, 255, 0.024);
    --ink-3:         rgba(255, 255, 255, 0.055);
    --ink-4:         rgba(255, 255, 255, 0.09);
    --border:        rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.16);
    --border-loud:   rgba(255, 255, 255, 0.26);

    --text:          #f2f5fa;
    --text-muted:    #8d94a5;
    --text-faint:    #626a7b;
    --text-inverse:  #0b0d12;

    --accent:        #2b8cff;
    --accent-hover:  #4d9fff;
    --accent-active: #006dfc;
    --accent-bright: #5ec8ff;
    --accent-soft:   rgba(43, 140, 255, 0.14);
    --accent-text:   #7db6ff;
    --on-accent:     #ffffff;

    --brand-gradient:      linear-gradient(135deg, #3bb4ff 0%, #1f86ff 38%, #0d5ff2 100%);
    --brand-gradient-text: linear-gradient(92deg, #4d9fff 0%, #5ec8ff 100%);

    --success:       #34d399;
    --success-soft:  rgba(52, 211, 153, 0.13);
    --warning:       #f0b53f;
    --warning-soft:  rgba(240, 181, 63, 0.13);
    --danger:        #f4676c;
    --danger-soft:   rgba(244, 103, 108, 0.13);
    --info:          #5ec8ff;
    --info-soft:     rgba(94, 200, 255, 0.13);

    --hover-tint:    var(--ink-3);
    --sunken-tint:   var(--ink-2);
    --contrast-bg:   #ffffff;
    --contrast-text: #0b0d12;
    --contrast-hover:#e6eaf2;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
    --shadow-xl: 0 48px 110px -40px rgba(0, 0, 0, 0.9);
    --shadow-glow: 0 10px 34px -12px rgba(43, 140, 255, 0.55);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
    color-scheme: light;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

html[data-theme="dark"] { color-scheme: dark; }

/* Logo swaps with the theme */
.logo-dark { display: none; }
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark  { display: block; }

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
}

img, svg, video { display: block; max-width: 100%; }

[hidden] { display: none !important; }   /* wins over a component's own display, so hidden buttons and rows take no space */

button, input, select, textarea { font: inherit; color: inherit; }

ul, ol { list-style: none; }

a { color: inherit; text-decoration: none; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

::selection { background: rgba(43, 140, 255, 0.32); }

/* ---------- Typography ---------- */
.h1, h1 { font-size: var(--text-3xl); font-weight: 600; letter-spacing: -0.035em; line-height: 1.12; }
.h2, h2 { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.03em;  line-height: 1.18; }
.h3, h3 { font-size: var(--text-xl);  font-weight: 600; letter-spacing: -0.025em; line-height: 1.25; }
.h4, h4 { font-size: var(--text-lg);  font-weight: 600; letter-spacing: -0.02em;  line-height: 1.3; }
.h5, h5 { font-size: var(--text-md);  font-weight: 600; letter-spacing: -0.015em; line-height: 1.4; }

.display {
    font-size: var(--text-4xl);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.text-muted { color: var(--text-muted); }
.text-faint { color: var(--text-faint); }
.text-accent { color: var(--accent-text); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger  { color: var(--danger); }

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }

.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

.mono { font-family: var(--font-mono); font-size: 0.92em; }

/* Gradient headline treatment */
.text-gradient {
    background: var(--brand-gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.eyebrow {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
}

/* ---------- Layout helpers ---------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--s-6);
}

.stack   { display: flex; flex-direction: column; gap: var(--s-4); }
.stack-2 { display: flex; flex-direction: column; gap: var(--s-2); }
.stack-6 { display: flex; flex-direction: column; gap: var(--s-6); }

.row {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
}

.row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    flex-wrap: wrap;
}

.grid    { display: grid; gap: var(--s-4); }
.grid-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

.divider {
    height: 1px;
    background: var(--border);
    border: 0;
}

.divider-label {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    color: var(--text-faint);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.divider-label::before,
.divider-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Motion ----------
   One entrance gesture, used everywhere. Short travel, no bounce, no scale —
   the point is to settle the eye, not to perform. */
@keyframes rise-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.rise { animation: rise-in var(--dur-slow) var(--ease-out) backwards; }

/* Stagger helper: .rise-group > children come in one after another.
   Kept short on purpose — content held at opacity 0 while a page is still
   settling reads as a slow load, not as polish. */
/* `backwards`, not `both`: once the animation ends the element must return to
   normal painting, or every block keeps its own stacking layer and later
   siblings sit on top of dropdowns opened from earlier ones. */
.rise-group > * { animation: rise-in 0.32s var(--ease-out) backwards; }
.rise-group > *:nth-child(1) { animation-delay: 0s; }
.rise-group > *:nth-child(2) { animation-delay: 0.04s; }
.rise-group > *:nth-child(3) { animation-delay: 0.08s; }
.rise-group > *:nth-child(4) { animation-delay: 0.12s; }
.rise-group > *:nth-child(5) { animation-delay: 0.16s; }
.rise-group > *:nth-child(n+6) { animation-delay: 0.20s; }

/* Scrollbars: thin, hairline-coloured, no track chrome. The standard
   properties cover current Chrome, Edge and Firefox; the ::-webkit- rules
   cover Safari. The page keeps its scrollbar gutter even when nothing
   scrolls, so content never shifts sideways when a tab or a dialog changes
   the page height. */
html { scrollbar-color: var(--border-loud) transparent; scrollbar-gutter: stable; }
* { scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background-color: var(--border-loud);
    border-radius: var(--r-full);
    border: 3px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--text-faint); }
::-webkit-scrollbar-corner { background: transparent; }

/* Respect the system setting — motion off, everything still renders */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}