/* ==========================================================================
   Rekhta Events — design tokens
   Single source of truth for palette, typography, spacing, radii, elevation.
   Never hard-code a hex or a spacing value in a component; always use a var.
   ========================================================================== */

:root {
    /* ----- Ink (text on light ground) ----- */
    --rk-ink-900: #0F1216;      /* headings, primary text */
    --rk-ink-700: #2A3038;      /* body */
    --rk-ink-500: #616874;      /* secondary, meta */
    --rk-ink-300: #A5ACB6;      /* placeholder, disabled */

    /* ----- Lines & surfaces ----- */
    --rk-line-strong: #DDD6C4;  /* visible borders */
    --rk-line-soft:   #ECE7D8;  /* subtle dividers */
    --rk-canvas:      #F6F3E9;  /* page background — warm paper */
    --rk-surface:     #FFFFFF;  /* cards, inputs, grid rows */
    --rk-surface-2:   #FBF8ED;  /* sidebar, raised surfaces */
    --rk-surface-3:   #F1EDDE;  /* hover fills */

    /* ----- Accent (Rekhta maroon, used sparingly) ----- */
    --rk-accent:      #6B1E2E;
    --rk-accent-hi:   #7E2434;
    --rk-accent-lo:   #571724;
    --rk-accent-ink:  #FFFFFF;
    --rk-accent-tint: #F1E4E6;

    /* ----- Gilt (signature hairline — brand block + active nav; also seat "best" tier) ----- */
    --rk-gilt: #B08A50;
    --rk-gilt-tint: #F5ECD9;

    /* ----- Semantic (kept separate from accent) ----- */
    --rk-ok:          #2F7A4A;
    --rk-ok-tint:     #E4F0E8;
    --rk-warn:        #B26A00;
    --rk-warn-tint:   #F6ECD9;
    --rk-danger:      #A02B34;
    --rk-danger-tint: #F3DDE0;
    --rk-info:        #1E5B6B;
    --rk-info-tint:   #DCEAEE;

    /* ----- Radii ----- */
    --rk-r-1: 3px;   /* chips, kbd */
    --rk-r-2: 5px;   /* inputs, buttons */
    --rk-r-3: 8px;   /* cards, sections */

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

    /* ----- Typography ----- */
    --rk-f-sans: -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", system-ui, sans-serif;
    --rk-f-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
    --rk-f-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;   /* wordmark only */

    /* ----- Elevation ----- */
    --rk-shadow-1: 0 1px 0 rgba(15, 18, 22, 0.03);
    --rk-shadow-2: 0 4px 14px rgba(15, 18, 22, 0.08), 0 1px 2px rgba(15, 18, 22, 0.04);

    /* ----- Frame sizing ----- */
    --rk-sidebar-w: 264px;
    --rk-topbar-h:  56px;
}

/* --------------------------------------------------------------------------
   Dark theme via prefers-color-scheme (auto) and [data-theme] override.
   Style components through the tokens above; never inside these blocks.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    :root {
        --rk-ink-900: #F1EAD9;
        --rk-ink-700: #C7BFAE;
        --rk-ink-500: #8A8477;
        --rk-ink-300: #55514A;
        --rk-line-strong: #2C2822;
        --rk-line-soft:   #221F1B;
        --rk-canvas:      #14120F;
        --rk-surface:     #1A1815;
        --rk-surface-2:   #17140F;
        --rk-surface-3:   #221E17;
        --rk-accent:      #8A2E43;
        --rk-accent-hi:   #A03A52;
        --rk-accent-lo:   #E29AAD;
        --rk-accent-ink:  #FFFFFF;
        --rk-accent-tint: #2A1D20;
        --rk-gilt:        #C6A26A;
        --rk-gilt-tint:   #2A2113;
        --rk-ok-tint:     #16281F;
        --rk-warn-tint:   #2A2115;
        --rk-danger-tint: #2A1518;
        --rk-info-tint:   #132126;
    }
}

:root[data-theme="dark"] {
    --rk-ink-900: #F1EAD9;
    --rk-ink-700: #C7BFAE;
    --rk-ink-500: #8A8477;
    --rk-ink-300: #55514A;
    --rk-line-strong: #2C2822;
    --rk-line-soft:   #221F1B;
    --rk-canvas:      #14120F;
    --rk-surface:     #1A1815;
    --rk-surface-2:   #17140F;
    --rk-surface-3:   #221E17;
    --rk-accent:      #8A2E43;
    --rk-accent-hi:   #A03A52;
    --rk-accent-lo:   #E29AAD;
    --rk-accent-ink:  #FFFFFF;
    --rk-accent-tint: #2A1D20;
    --rk-gilt:        #C6A26A;
    --rk-gilt-tint:   #2A2113;
    --rk-ok-tint:     #16281F;
    --rk-warn-tint:   #2A2115;
    --rk-danger-tint: #2A1518;
    --rk-info-tint:   #132126;
}

:root[data-theme="light"] {
    --rk-ink-900: #0F1216;
    --rk-ink-700: #2A3038;
    --rk-ink-500: #616874;
    --rk-ink-300: #A5ACB6;
    --rk-line-strong: #DDD6C4;
    --rk-line-soft:   #ECE7D8;
    --rk-canvas:      #F6F3E9;
    --rk-surface:     #FFFFFF;
    --rk-surface-2:   #FBF8ED;
    --rk-surface-3:   #F1EDDE;
    --rk-accent:      #6B1E2E;
    --rk-accent-hi:   #7E2434;
    --rk-accent-lo:   #571724;
    --rk-accent-ink:  #FFFFFF;
    --rk-accent-tint: #F1E4E6;
    --rk-gilt:        #B08A50;
    --rk-gilt-tint:   #F5ECD9;
    --rk-ok-tint:     #E4F0E8;
    --rk-warn-tint:   #F6ECD9;
    --rk-danger-tint: #F3DDE0;
    --rk-info-tint:   #DCEAEE;
}