/* ============================================================
   koinorista.cy — design foundation (theme)
   The shared base every page loads: the CSS reset, the :root
   design tokens (--accent / --bo-* / fonts / status castes), the
   universal soft-motion layer, and the body aurora background.
   Carries no chrome and no JS. The authenticated back-office
   chrome lives in backend.css; the anonymous auth card in
   auth.css — both build on these tokens.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* ── koino%rista.cy — "Navy Slate" design system (v4) ──────
       Dark navy surfaces step up from the app background through
       panels to raised popovers, with a separate inset level for
       inputs / wells. SLATE-BLUE is the primary interactive accent;
       a warm caste set (sage / gold / scarlet) carries financial
       status. See design_handoff_koinorista_portal/README.md. */
    --bg:        #101723;   /* app background (top of the gradient) */
    --bg2:       #070b12;   /* deepest / behind app */
    --panel:     #152030;   /* card surface */
    --panel2:    #1d2c40;   /* table header / sub-surface / chips */
    --raised:    #22344b;   /* popover / hover-raised */
    --inset:     #0a0f18;   /* inputs, wells, selector */
    --line:      rgba(196, 208, 224, .14);
    --line2:     rgba(196, 208, 224, .27);

    --text:      #ecf1f8;   /* primary text (ink) */
    --text2:     #c4cfe0;   /* secondary / table body */
    --muted:     #8b97a8;   /* captions, labels */
    --faint:     #606d7d;   /* disabled / column tags */
    --ink-rgb:   236, 241, 248;   /* --text as an rgb triple for rgba() */

    /* Primary accent (slate-blue) + soft fill / deep avatar bg. */
    --accent:      #7c9cc4;
    --accent-rgb:  124, 156, 196;
    --accent-soft: rgba(124, 156, 196, .16);
    --accent-deep: #2c3e54;
    --accent-ink:  #0b1018;   /* text on a filled accent */

    /* Caste / financial status — paid / due / overdue. */
    --sage:         #83a596;   /* paid, positive, income */
    --sage-soft:    rgba(111, 143, 129, .16);
    --sage-bd:      rgba(111, 143, 129, .45);
    --gold:         #c2a35b;   /* due, key accents, logo slash */
    --gold-soft:    rgba(194, 163, 91, .14);
    --gold-bd:      rgba(194, 163, 91, .45);
    --scarlet:      #cf6457;   /* overdue, negative, expenses */
    --scarlet-soft: rgba(162, 58, 46, .18);
    --scarlet-bd:   rgba(162, 58, 46, .5);
    --tile:         #16273a;   /* logo tile / brand-mark backdrop */

    /* Type: Sora = body / buttons / table text (base weight 500);
       Nunito = headings, titles, nav labels, badges (700–900);
       JetBrains Mono = ALL figures, amounts, ‰ shares, IBANs, dates
       and eyebrows (font-variant-numeric: tabular-nums). */
    --font-body:    'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Nunito', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    /* ── Legacy aliases ───────────────────────────────────────
       Older rules reference --bo-* and the previous hue names
       (--violet/--teal/--pink/--sky). They now resolve onto the
       Navy Slate tokens so nothing needs per-rule edits: the
       primary accent is slate, "paid" is sage, "overdue" is
       scarlet. Page headings use --text (ink), not the accent. */
    --violet:    var(--accent);    /* primary accent is now slate */
    --sky:       var(--accent);    /* slate income / data series */
    --teal:      var(--sage);      /* "positive / paid" is now sage */
    --pink:      var(--scarlet);   /* "negative / overdue" is now scarlet */
    --on-violet: var(--accent-ink);

    --bo-ink:        var(--bg);
    --bo-ink-2:      var(--panel);
    --bo-ink-soft:   var(--raised);
    --bo-cream:      var(--text);
    --bo-text-muted: var(--muted);
    --bo-border:     var(--line);
    --bo-gold:       var(--gold);
    --bo-gold-lt:    var(--accent);   /* primary accent — slate */
    --bo-pink:       var(--scarlet);
    --bo-sky:        var(--accent);
    --bo-violet:     var(--accent);
    --bo-sans:       var(--font-body);
    --bo-serif:      var(--font-display);
    --bo-mono:       var(--font-body);   /* chrome labels = Sora */
    --bo-num:        var(--font-mono);   /* tabular / code = JetBrains Mono */

    /* Soft-motion timing (120–200ms, ease cubic-bezier(.2,0,0,1)). */
    --bo-transition-fast: .15s;
    --bo-transition:      .2s;
    --bo-transition-slow: .3s;
    --bo-ease:            cubic-bezier(.2, 0, 0, 1);

    /* Render native form controls (date picker, scrollbars, select
       pop-out, autofill) in their dark variant against the dark UI. */
    color-scheme: dark;
}

/* Universal soft-motion layer. Targets only properties that are
   safe to interpolate everywhere — colours, borders, shadows,
   transforms, opacity — so state changes (hover, focus, .active,
   media-query breakpoints that flip a class) glide instead of
   snapping. Layout properties (width, height, padding, margin,
   gap) are NOT in the universal list because they change every
   pixel during a window-resize and would create perceptible lag;
   each container that benefits from a soft resize gets its own
   targeted rule further down.

   Operators with `prefers-reduced-motion` get an immediate
   override below that collapses everything to a near-instant
   transition — keeps the UI accessible without removing the
   visual feedback entirely. */
*,
*::before,
*::after {
    transition-property: background-color, color, border-color, outline-color, box-shadow, fill, stroke, transform, opacity;
    transition-duration: var(--bo-transition-fast);
    transition-timing-function: var(--bo-ease);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --bo-transition-fast: .01ms;
        --bo-transition:      .01ms;
        --bo-transition-slow: .01ms;
    }

    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

html { font-size: 16px; }

body {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--text);
    min-height: 100vh;
    /* Navy Slate atmosphere — a soft gold top-glow + a faint blue
       corner glow over a navy vertical gradient. Fixed so it stays
       put while the content column scrolls. */
    background-color: var(--bg2);
    background-image:
        radial-gradient(70% 42% at 50% -8%, rgba(194, 163, 91, .10), transparent 60%),
        radial-gradient(55% 50% at 100% 0%, rgba(124, 156, 196, .10), transparent 55%),
        linear-gradient(180deg, #101723 0%, #0c121c 60%, #070b12 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}