/* ============================================================
   CSS VARIABLES — UserAuth warm-neutral theme
   Warm paper + a single gold accent (matches the landing page).
   2px radius throughout.
   ============================================================ */

:root {
    /* Fonts */
    --font-body:    'Inter', system-ui, -apple-system, sans-serif;
    --font-heading: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono:    'SF Mono', 'Fira Code', monospace;

    /* Typography scale — rem throughout (respects user font-size preference) */
    --text-xs:   0.6875rem;  /* 11px */
    --text-sm:   0.75rem;    /* 12px */
    --text-base: 0.875rem;   /* 14px — body text */
    --text-md:   0.875rem;   /* 14px — alias kept for compatibility */
    --text-lg:   1rem;       /* 16px */
    --text-xl:   1.125rem;   /* 18px */
    --text-2xl:  1.5rem;     /* 24px */
    --text-3xl:  1.875rem;   /* 30px */

    /* Font weights */
    --font-normal:    400;
    --font-medium:    500;
    --font-semibold:  600;
    --font-bold:      700;
    --font-extrabold: 800;

    /* Backgrounds — warm paper */
    --color-bg-page:     #FBFAF7;
    --color-bg-surface:  #FFFFFF;
    --color-bg-surface2: #F4F2EC;
    --color-bg-hover:    rgba(184,137,58,0.05);
    --color-bg-active:   rgba(184,137,58,0.10);
    --color-bg-subtle:   #F4F2EC;
    --color-bg-elevated: #FFFFFF;

    /* Text — warm ink */
    --color-text-primary:   #1A1815;
    --color-text-secondary: #3C362D;
    --color-text-muted:     #79736A;
    --color-text-faint:     #A8A192;
    --color-text-disabled:  #C4BDB0;

    /* Borders — warm lines */
    --color-border-default: #E7E2D6;
    --color-border-light:   #F0ECE2;
    --color-border-subtle:  #F4F2EC;

    /* Accent — single gold */
    --color-accent:      #B8893A;
    --color-accent-text: #1A1815;
    --color-accent-glow: rgba(184,137,58,0.15);

    /* Status */
    --color-success:        #059669;
    --color-success-bg:     rgba(5,150,105,0.08);
    --color-success-text:   #065f46;
    --color-success-border: #059669;

    --color-danger:         #e11d48;
    --color-danger-bg:      rgba(225,29,72,0.08);
    --color-danger-text:    #9f1239;
    --color-danger-border:  #e11d48;

    --color-warning:        #d97706;
    --color-warning-bg:     rgba(217,119,6,0.08);
    --color-warning-text:   #92400e;
    --color-warning-border: #d97706;

    --color-info-bg:     rgba(184,137,58,0.08);
    --color-info-text:   #8C6529;
    --color-info-border: #B8893A;

    /* Legacy status aliases */
    --color-status-success-bg:     var(--color-success-bg);
    --color-status-success-text:   var(--color-success-text);
    --color-status-success-border: var(--color-success-border);
    --color-status-danger-bg:      var(--color-danger-bg);
    --color-status-danger-text:    var(--color-danger-text);
    --color-status-danger-border:  var(--color-danger-border);
    --color-status-warning-bg:     var(--color-warning-bg);
    --color-status-warning-text:   var(--color-warning-text);
    --color-status-warning-border: var(--color-warning-border);
    --color-status-info-bg:        var(--color-info-bg);
    --color-status-info-text:      var(--color-info-text);
    --color-status-info-border:    var(--color-info-border);
    --color-status-neutral-bg:     rgba(0,0,0,0.04);
    --color-status-neutral-text:   var(--color-text-muted);
    --color-status-neutral-border: var(--color-border-default);
    --color-status-purple-bg:      rgba(184,137,58,0.08);
    --color-status-purple-text:    #8C6529;
    --color-status-purple-border:  rgba(184,137,58,0.3);

    /* Shadows */
    --shadow-subtle: 0 1px 2px rgba(0,0,0,0.06);
    --shadow-sm:     0 1px 3px rgba(0,0,0,0.10);
    --shadow-md:     0 4px 16px rgba(0,0,0,0.12);
    --shadow-lg:     0 20px 50px rgba(0,0,0,0.20);

    /* Radius — 2 px minimal */
    --radius-sm: 2px;
    --radius-md: 2px;

    /* Chrome — nav and admin-nav use warm near-black for contrast */
    --color-bg-chrome:   #1A1815;

    /* Nav tokens (menu redesign) — warm near-black + gold */
    --nav-bg:        #1A1815;
    --nav-border:    #2A2620;
    --nav-fg:        #FFFFFF;
    --nav-fg-muted:  #C7C0B1;
    --nav-fg-dim:    #A8A192;
    --nav-hover:     rgba(255,255,255,.07);
    --nav-active:    rgba(255,255,255,.10);
    --nav-rule:      rgba(255,255,255,.10);
    --accent-on-nav: #D8B26A;
    --role-admin-bg: rgba(184,137,58,.16);
    --role-admin-fg: #E8C588;
    --role-admin-bd: rgba(232,197,136,.25);
    --shadow-pop:    0 24px 60px -20px rgba(26,24,21,.22), 0 6px 16px -8px rgba(26,24,21,.10);

    /* Layout */
    --sidebar-width:    220px;
    --header-height:      68px;
    --admin-bar-height:   38px;
    --admin-nav-height:   36px;
    --secondary-nav-height: 36px;

    /* Transitions */
    --transition-fast:    0.1s ease;
    --transition-default: 0.15s ease;
    --transition-base:    0.2s ease;

    /* Spacing (4px base) */
    --space-1:  2px;
    --space-2:  4px;
    --space-3:  8px;
    --space-4:  10px;
    --space-5:  12px;
    --space-6:  14px;
    --space-7:  16px;
    --space-8:  18px;
    --space-9:  20px;
    --space-10: 24px;
    --space-11: 28px;

    /* ── Table surface tokens (warm paper — tables are always light-surfaced) */
    --paper:              #FFFFFF;
    --paper-2:            #FAF8F3;
    --ink:                #1A1815;
    --ink-2:              #3C362D;
    --muted:              #79736A;
    --muted-2:            #A8A192;
    --line:               #E7E2D6;
    --line-2:             #F0ECE2;
    --row-hover:          #FAF8F3;
    --row-selected:       #FBF6EA;
    --row-selected-hover: #F5EEDC;
    --accent-soft:        #F5EEDC;
    --accent-ink:         #8C6529;

    /* Role pill tones */
    --r-admin-bg:   #F4ECD8; --r-admin-fg:   #7A5618; --r-admin-bd:   #E8DAB7;
    --r-staff-bg:   #EDE8F9; --r-staff-fg:   #4C2E92; --r-staff-bd:   #DCD3F1;
    --r-user-bg:    #F5EEDC; --r-user-fg:    #8C6529; --r-user-bd:    #E7D8B4;
    --r-pending-bg: #FEF7E0; --r-pending-fg: #8B6914; --r-pending-bd: #F2E5B5;

    /* Status pill tones */
    --s-active-bg:   #E6F4ED;  --s-active-fg:   #0E5A39;  --s-active-bd:   #BFE2CE;  --s-active-dot:   #10A75B;
    --s-pending-bg:  #FEF7E0;  --s-pending-fg:  #8B6914;  --s-pending-bd:  #F2E5B5;  --s-pending-dot:  #D4A017;
    --s-inactive-bg: #F4F2EC;  --s-inactive-fg: #79736A;  --s-inactive-bd: #E7E2D6;  --s-inactive-dot: #A8A192;
    --s-banned-bg:   #FEF3F2;  --s-banned-fg:   #B42318;  --s-banned-bd:   #FBD3CF;  --s-banned-dot:   #E5484D;
}

/* ─────────────────────────────────────────────────────────────
   Module surface overrides

   The calculators are worksheets. They run on the cool grey ground
   set by the Asset & Debt Spreadsheet editor: white panels over
   #FAFAFA, hairline #E0E0E0 rules, neutral grey ink, and one slate
   navy that carries selection, focus and the primary action. Nothing
   in a module is beige — the warm paper and gold belong to the
   landing pages, which keep the :root palette above.

   Every module list, table, toolbar and form already draws from these
   tokens, so the whole module changes with them, not just the editor.
   ───────────────────────────────────────────────────────────── */
body.module {
    /* Ground and surfaces */
    --color-bg-page:     #F5F6F7;
    --color-bg-surface:  #FFFFFF;
    --color-bg-surface2: #FAFAFA;
    --color-bg-subtle:   #F1F2F4;
    --color-bg-elevated: #FFFFFF;
    --color-bg-hover:    rgba(44, 62, 80, 0.05);
    --color-bg-active:   rgba(44, 62, 80, 0.09);

    /* Ink — neutral grey, no warm cast */
    --color-text-primary:   #333333;
    --color-text-secondary: #4F545A;
    --color-text-muted:     #767B80;
    --color-text-faint:     #9A9FA5;
    --color-text-disabled:  #B9BDC2;

    /* Rules */
    --color-border-default: #E0E0E0;
    --color-border-light:   #EDEDED;
    --color-border-subtle:  #F4F4F5;

    /* Accent — slate navy, with the lighter tone used for hover */
    --color-accent:       #2C3E50;
    --color-accent-light: #3D556E;
    --color-accent-text:  #FFFFFF;
    --color-accent-glow:  rgba(44, 62, 80, 0.15);

    /* Status — the editor's muted set, deepened just enough to hold AA
       against white. Status is signal, so it stays quieter than the
       marketing palette's. */
    --color-success:        #3F7A52;
    --color-success-bg:     rgba(63, 122, 82, 0.09);
    --color-success-text:   #2F5C3E;
    --color-success-border: #3F7A52;

    --color-danger:         #C0392B;
    --color-danger-bg:      rgba(192, 57, 43, 0.08);
    --color-danger-text:    #96291D;
    --color-danger-border:  #C0392B;

    --color-warning:        #A97400;
    --color-warning-bg:     rgba(169, 116, 0, 0.09);
    --color-warning-text:   #7A5400;
    --color-warning-border: #A97400;

    --color-status-success-bg:     rgba(63, 122, 82, 0.09);
    --color-status-success-text:   #2F5C3E;
    --color-status-success-border: #3F7A52;
    --color-status-danger-bg:      rgba(192, 57, 43, 0.08);
    --color-status-danger-text:    #96291D;
    --color-status-danger-border:  #C0392B;
    --color-status-warning-bg:     rgba(169, 116, 0, 0.09);
    --color-status-warning-text:   #7A5400;
    --color-status-warning-border: #A97400;

    /* Info reads as the accent here, not as gold */
    --color-info-bg:     rgba(44, 62, 80, 0.07);
    --color-info-text:   #2C3E50;
    --color-info-border: #2C3E50;

    --color-status-info-bg:     rgba(44, 62, 80, 0.07);
    --color-status-info-text:   #2C3E50;
    --color-status-info-border: #2C3E50;
    --color-status-neutral-bg:  #F1F2F4;

    /* Table and panel surface */
    --paper:              #FFFFFF;
    --paper-2:            #FAFAFA;
    --ink:                #333333;
    --ink-2:              #46494D;
    --muted:              #767B80;
    --muted-2:            #9A9FA5;
    --line:               #E0E0E0;
    --line-2:             #EFEFEF;
    --row-hover:          #F7F8F9;
    --row-selected:       #EDF1F5;
    --row-selected-hover: #E4EAF1;
    --accent-soft:        #EDF1F5;
    --accent-ink:         #2C3E50;

    /* Corners — the editor's panels are softer than the 2px chrome */
    --radius-sm: 4px;
    --radius-md: 6px;

    /* Worksheet tones shared by the editors and their summaries */
    --calc-bg:  #F7F9FB;
    --calc-bd:  #DCE3EA;
    --calc-fg:  #2C3E50;
}

/* ─────────────────────────────────────────────────────────────
   Public surface overrides

   The marketing pages carry their own vocabulary (--paper, --ink,
   --accent …) in the site-head widget, which is editable in the admin.
   What they cannot set there are the shared component tokens, so the
   same cool grey and slate navy are repeated here for the buttons,
   alerts, badges and news cards that come from components.css.
   ───────────────────────────────────────────────────────────── */
body.public {
    --color-bg-page:     #F5F6F7;
    --color-bg-surface:  #FFFFFF;
    --color-bg-surface2: #FAFAFA;
    --color-bg-subtle:   #F1F3F5;
    --color-bg-elevated: #FFFFFF;
    --color-bg-hover:    rgba(44, 62, 80, 0.05);
    --color-bg-active:   rgba(44, 62, 80, 0.09);

    --color-text-primary:   #333333;
    --color-text-secondary: #4F545A;
    --color-text-muted:     #767B80;
    --color-text-faint:     #9A9FA5;

    --color-border-default: #E0E0E0;
    --color-border-light:   #EDEDED;
    --color-border-subtle:  #F4F4F5;

    --color-accent:       #2C3E50;
    --color-accent-light: #3D556E;
    --color-accent-text:  #FFFFFF;
    --color-accent-glow:  rgba(44, 62, 80, 0.15);

    --color-info-bg:     rgba(44, 62, 80, 0.07);
    --color-info-text:   #2C3E50;
    --color-info-border: #2C3E50;

    --color-success:        #3F7A52;
    --color-success-bg:     rgba(63, 122, 82, 0.09);
    --color-success-text:   #2F5C3E;
    --color-success-border: #3F7A52;

    --color-danger:         #C0392B;
    --color-danger-bg:      rgba(192, 57, 43, 0.08);
    --color-danger-text:    #96291D;
    --color-danger-border:  #C0392B;

    --color-warning:        #A97400;
    --color-warning-bg:     rgba(169, 116, 0, 0.09);
    --color-warning-text:   #7A5400;
    --color-warning-border: #A97400;

    --radius-sm: 4px;
    --radius-md: 6px;
}

/* ─────────────────────────────────────────────────────────────
   Admin surface overrides

   Admin is a work surface, not a marketing page: it runs on a
   plain ground so data carries the visual weight. The warm-paper
   palette above still governs the public and member pages.

   The neutrals keep a barely-there warm tint (never pure #FFF) so
   they sit correctly beside the gold accent, which is retained
   for selection and focus — the states where color means something.
   ───────────────────────────────────────────────────────────── */
body.admin {
    --color-bg-page:     #FDFDFB;
    --color-bg-surface2: #F4F4F2;
    --color-bg-subtle:   #F4F4F2;
    --color-bg-hover:    rgba(26, 24, 21, 0.04);
    --color-bg-active:   rgba(26, 24, 21, 0.07);

    /* Rules and hovers lose the beige cast; on a white ground the warm
       borders read as tan edging rather than structure. */
    --line:              #E5E5E2;
    --line-2:            #F0F0EE;
    --row-hover:         #FAFAFA;
    --paper-2:           #FAFAFA;

    /* Primary actions read as ink, not gold. */
    --color-btn-primary-bg:   #1A1815;
    --color-btn-primary-text: #FFFFFF;
}