/* ============================================================================
   Modibbo Girei — design tokens
   ----------------------------------------------------------------------------
   The single source of colour, type, space and depth for BOTH surfaces: the
   admin portal and the public family site. Nothing else in the codebase should
   contain a raw hex value.

   Structure:
     1. Private ramps   --c-*      raw scales. Never used by components.
     2. Semantic tokens --surface-*, --text-*, --accent-* ... what components use.

   The indirection is what makes dark mode a 40-line override instead of a
   rewrite: only the semantic layer is redefined, and every component follows.

   THEMING. Three layers, in this order — later rules win:
     :root                                    light (the default)
     @media (prefers-color-scheme: dark)      follow the OS, unless the user
                                              has explicitly chosen light
     :root[data-theme="dark"|"light"]         the user's explicit choice

   Plain CSS has no mixins, so the dark values appear twice. That duplication is
   the honest cost of having no build step; keep the two blocks in sync.

   The theme attribute is written server-side on <html> from a cookie, so the
   correct palette is present in the first byte of HTML. Setting it from JS
   would flash the wrong theme on every load, and the CSP forbids the inline
   script that is the usual workaround.
   ============================================================================ */

:root {
    color-scheme: light;

    /* ---- 1. Private ramps --------------------------------------------------
       Neutrals are deliberately WARM (a touch of yellow/red rather than blue).
       Against the cool corporate blue-greys of the old theme this reads closer
       to paper and archive material, which is what a family record is. */
    --c-sand-25:   #fdfcfa;
    --c-sand-50:   #faf8f5;
    --c-sand-100:  #f4f1ec;
    --c-sand-200:  #e8e3da;
    --c-sand-300:  #d6cec1;
    --c-sand-400:  #b3a998;
    --c-sand-500:  #8c8172;
    --c-sand-600:  #6b6154;
    --c-sand-700:  #4f473d;
    --c-sand-800:  #35302a;
    --c-sand-900:  #23201c;
    --c-sand-950:  #171512;

    /* Deep teal-green: the family mark. Distinct from the old #0d47a1 blue,
       and it holds contrast against warm neutrals in both themes. */
    --c-teal-50:   #eafaf5;
    --c-teal-100:  #cbf1e4;
    --c-teal-200:  #98e3cb;
    --c-teal-300:  #5ccdae;
    --c-teal-400:  #2eb08f;
    --c-teal-500:  #12907360;
    --c-teal-500-solid: #129073;
    --c-teal-600:  #0d7a6b;
    --c-teal-700:  #0b6155;
    --c-teal-800:  #0a4d45;
    --c-teal-900:  #083e38;

    /* Amber: highlights, "member of the day", generation chips. Used sparingly. */
    --c-amber-100: #fdf1d6;
    --c-amber-300: #f2c866;
    --c-amber-500: #d99e21;
    --c-amber-600: #b47d13;
    --c-amber-700: #8c5f0e;

    --c-red-100:   #fde8e6;
    --c-red-300:   #f2a9a2;
    --c-red-500:   #d64b3c;
    --c-red-600:   #b53829;
    --c-red-700:   #8f2b1f;

    --c-blue-100:  #e2eefb;
    --c-blue-500:  #2a72c4;
    --c-blue-600:  #1f5a9e;

    --c-green-100: #e3f6e7;
    --c-green-500: #2f9e4f;
    --c-green-600: #23803e;

    /* ---- 2. Semantic: surfaces & text ------------------------------------ */
    --surface-page:     var(--c-sand-50);
    --surface-raised:   #ffffff;
    --surface-sunken:   var(--c-sand-100);
    --surface-overlay:  #ffffff;
    --surface-inverse:  var(--c-sand-900);
    --surface-hover:    var(--c-sand-100);
    --surface-active:   var(--c-sand-200);
    --backdrop:         rgba(35, 32, 28, 0.45);

    --text-primary:     var(--c-sand-900);
    --text-secondary:   var(--c-sand-700);
    --text-muted:       var(--c-sand-500);
    --text-inverse:     var(--c-sand-25);
    --text-on-accent:   #ffffff;

    --border-subtle:    var(--c-sand-200);
    --border-default:   var(--c-sand-300);
    --border-strong:    var(--c-sand-400);
    --border-focus:     var(--c-teal-600);

    /* ---- Interactive ------------------------------------------------------ */
    --accent:           var(--c-teal-600);
    --accent-hover:     var(--c-teal-700);
    --accent-active:    var(--c-teal-800);
    --accent-subtle:    var(--c-teal-50);
    --accent-border:    var(--c-teal-200);
    --accent-text:      var(--c-teal-700);

    --highlight:        var(--c-amber-500);
    --highlight-subtle: var(--c-amber-100);
    --highlight-text:   var(--c-amber-700);

    /* ---- Status ----------------------------------------------------------- */
    --status-success-bg:     var(--c-green-100);
    --status-success-border: var(--c-green-500);
    --status-success-text:   var(--c-green-600);

    --status-danger-bg:      var(--c-red-100);
    --status-danger-border:  var(--c-red-500);
    --status-danger-text:    var(--c-red-700);

    --status-warning-bg:     var(--c-amber-100);
    --status-warning-border: var(--c-amber-500);
    --status-warning-text:   var(--c-amber-700);

    --status-info-bg:        var(--c-blue-100);
    --status-info-border:    var(--c-blue-500);
    --status-info-text:      var(--c-blue-600);

    /* ---- Charts -----------------------------------------------------------
       Read from JavaScript via getComputedStyle so Chart.js follows the theme:
         getComputedStyle(document.documentElement).getPropertyValue('--chart-1')
       Ordered for categorical use — adjacent pairs stay distinguishable in the
       common forms of colour blindness, and none of them is the accent, so a
       chart never competes with the primary action on the page. */
    --chart-1: #0d7a6b;
    --chart-2: #d99e21;
    --chart-3: #2a72c4;
    --chart-4: #b0533f;
    --chart-5: #6b5ca5;
    --chart-6: #5f8a3a;
    --chart-grid:      var(--c-sand-200);
    --chart-axis-text: var(--c-sand-600);

    /* ---- Gender (tree + member cards) -------------------------------------
       A quiet signal, not the loud pink/blue node borders of the old tree. */
    --gender-male:   #3c78b4;
    --gender-female: #b0568c;

    /* ---- Typography -------------------------------------------------------
       A system stack rather than a webfont. It renders natively on every
       platform, costs zero requests, cannot flash unstyled text, and removes
       fonts.googleapis.com + fonts.gstatic.com from the CSP. The old theme
       loaded Open Sans from Google on every page for no gain over this. */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                 "Noto Sans", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;

    --fs-xs:   0.75rem;    /* 12px — captions, table meta      */
    --fs-sm:   0.8125rem;  /* 13px — secondary UI              */
    --fs-base: 0.9375rem;  /* 15px — body                      */
    --fs-md:   1.0625rem;  /* 17px — lead                      */
    --fs-lg:   1.25rem;    /* 20px — card titles               */
    --fs-xl:   1.5rem;     /* 24px — page titles               */
    --fs-2xl:  1.875rem;   /* 30px — stat values               */
    --fs-3xl:  2.25rem;    /* 36px — hero                      */
    --fs-4xl:  3rem;       /* 48px — public hero               */

    --lh-tight:  1.2;
    --lh-snug:   1.4;
    --lh-normal: 1.6;

    --fw-normal:   400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    --tracking-tight: -0.015em;
    --tracking-wide:   0.04em;

    /* ---- Space (4px base) -------------------------------------------------- */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* ---- Radius ------------------------------------------------------------ */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* ---- Elevation ---------------------------------------------------------
       Warm-tinted shadows. Pure black shadows over warm neutrals read grey and
       muddy. */
    --shadow-xs: 0 1px 2px rgba(35, 32, 28, 0.06);
    --shadow-sm: 0 1px 3px rgba(35, 32, 28, 0.08), 0 1px 2px rgba(35, 32, 28, 0.04);
    --shadow-md: 0 4px 10px rgba(35, 32, 28, 0.08), 0 2px 4px rgba(35, 32, 28, 0.04);
    --shadow-lg: 0 12px 28px rgba(35, 32, 28, 0.12), 0 4px 8px rgba(35, 32, 28, 0.05);
    --shadow-xl: 0 24px 48px rgba(35, 32, 28, 0.16);
    --ring-focus: 0 0 0 3px rgba(13, 122, 107, 0.28);

    /* ---- Motion ------------------------------------------------------------ */
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-slow: 320ms;
    --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);

    /* ---- Layout ------------------------------------------------------------ */
    --sidebar-w:           248px;
    --sidebar-w-collapsed: 68px;
    --topbar-h:            60px;
    --content-max:         1440px;
    --readable-max:        68ch;
    --drawer-w:            420px;

    /* ---- Z-index ladder ----------------------------------------------------
       Named so nothing has to invent a "z-index: 9999" ever again. */
    --z-base:     1;
    --z-sticky:   100;
    --z-dropdown: 200;
    --z-drawer:   300;
    --z-modal:    400;
    --z-toast:    500;
}

/* ---------------------------------------------------------------------------
   Dark — followed from the OS, unless the user explicitly chose light.
   --------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --surface-page:    var(--c-sand-950);
        --surface-raised:  var(--c-sand-900);
        --surface-sunken:  #100e0c;
        --surface-overlay: var(--c-sand-800);
        --surface-inverse: var(--c-sand-100);
        --surface-hover:   var(--c-sand-800);
        --surface-active:  var(--c-sand-700);
        --backdrop:        rgba(0, 0, 0, 0.65);

        --text-primary:    var(--c-sand-50);
        --text-secondary:  var(--c-sand-300);
        --text-muted:      var(--c-sand-400);
        --text-inverse:    var(--c-sand-900);

        --border-subtle:   #2e2925;
        --border-default:  var(--c-sand-800);
        --border-strong:   var(--c-sand-700);

        /* Lift the accent: --c-teal-600 on near-black fails contrast. */
        --accent:          var(--c-teal-400);
        --accent-hover:    var(--c-teal-300);
        --accent-active:   var(--c-teal-200);
        --accent-subtle:   rgba(46, 176, 143, 0.14);
        --accent-border:   rgba(46, 176, 143, 0.35);
        --accent-text:     var(--c-teal-300);
        --text-on-accent:  var(--c-sand-950);

        --highlight:        var(--c-amber-300);
        --highlight-subtle: rgba(242, 200, 102, 0.14);
        --highlight-text:   var(--c-amber-300);

        --status-success-bg:     rgba(47, 158, 79, 0.15);
        --status-success-border: #43b866;
        --status-success-text:   #7ed69a;

        --status-danger-bg:      rgba(214, 75, 60, 0.15);
        --status-danger-border:  #e06455;
        --status-danger-text:    #f0a79d;

        --status-warning-bg:     rgba(217, 158, 33, 0.15);
        --status-warning-border: var(--c-amber-300);
        --status-warning-text:   var(--c-amber-300);

        --status-info-bg:        rgba(42, 114, 196, 0.15);
        --status-info-border:    #4d8fd6;
        --status-info-text:      #9cc3ec;

        --chart-1: #2eb08f;
        --chart-2: #f2c866;
        --chart-3: #6ba6e8;
        --chart-4: #e08a76;
        --chart-5: #a396d8;
        --chart-6: #9dc46f;
        --chart-grid:      #2e2925;
        --chart-axis-text: var(--c-sand-400);

        --gender-male:   #6ba6e8;
        --gender-female: #d98cba;

        /* Shadows carry almost no weight on dark surfaces, so elevation is
           communicated with a hairline ring instead. */
        --shadow-xs: 0 0 0 1px rgba(255, 255, 255, 0.04);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
        --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
        --shadow-xl: 0 24px 52px rgba(0, 0, 0, 0.7);
        --ring-focus: 0 0 0 3px rgba(46, 176, 143, 0.35);
    }
}

/* ---------------------------------------------------------------------------
   Dark — chosen explicitly. Same values; see the note about duplication above.
   --------------------------------------------------------------------------- */
:root[data-theme="dark"] {
    color-scheme: dark;

    --surface-page:    var(--c-sand-950);
    --surface-raised:  var(--c-sand-900);
    --surface-sunken:  #100e0c;
    --surface-overlay: var(--c-sand-800);
    --surface-inverse: var(--c-sand-100);
    --surface-hover:   var(--c-sand-800);
    --surface-active:  var(--c-sand-700);
    --backdrop:        rgba(0, 0, 0, 0.65);

    --text-primary:    var(--c-sand-50);
    --text-secondary:  var(--c-sand-300);
    --text-muted:      var(--c-sand-400);
    --text-inverse:    var(--c-sand-900);

    --border-subtle:   #2e2925;
    --border-default:  var(--c-sand-800);
    --border-strong:   var(--c-sand-700);

    --accent:          var(--c-teal-400);
    --accent-hover:    var(--c-teal-300);
    --accent-active:   var(--c-teal-200);
    --accent-subtle:   rgba(46, 176, 143, 0.14);
    --accent-border:   rgba(46, 176, 143, 0.35);
    --accent-text:     var(--c-teal-300);
    --text-on-accent:  var(--c-sand-950);

    --highlight:        var(--c-amber-300);
    --highlight-subtle: rgba(242, 200, 102, 0.14);
    --highlight-text:   var(--c-amber-300);

    --status-success-bg:     rgba(47, 158, 79, 0.15);
    --status-success-border: #43b866;
    --status-success-text:   #7ed69a;

    --status-danger-bg:      rgba(214, 75, 60, 0.15);
    --status-danger-border:  #e06455;
    --status-danger-text:    #f0a79d;

    --status-warning-bg:     rgba(217, 158, 33, 0.15);
    --status-warning-border: var(--c-amber-300);
    --status-warning-text:   var(--c-amber-300);

    --status-info-bg:        rgba(42, 114, 196, 0.15);
    --status-info-border:    #4d8fd6;
    --status-info-text:      #9cc3ec;

    --chart-1: #2eb08f;
    --chart-2: #f2c866;
    --chart-3: #6ba6e8;
    --chart-4: #e08a76;
    --chart-5: #a396d8;
    --chart-6: #9dc46f;
    --chart-grid:      #2e2925;
    --chart-axis-text: var(--c-sand-400);

    --gender-male:   #6ba6e8;
    --gender-female: #d98cba;

    --shadow-xs: 0 0 0 1px rgba(255, 255, 255, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
    --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
    --shadow-xl: 0 24px 52px rgba(0, 0, 0, 0.7);
    --ring-focus: 0 0 0 3px rgba(46, 176, 143, 0.35);
}

/* Explicit light, overriding a dark OS preference. */
:root[data-theme="light"] {
    color-scheme: light;
}