/* =========================================================================
   BijouVision v2 — Design Tokens
   The real JDMIS brand language, extracted from match.jdmis.edu.sg
   (test.jdmis.edu.sg/FT100/match/styles.css).
   Light mode is the default; [data-theme="dark"] maps the same tokens.
   ========================================================================= */

:root {
    /* ---- JDMIS Brand palette ---- */
    --bv-cream:        #fffbf5;   /* page background (default light) */
    --bv-surface:      #ffffff;   /* cards, panels */
    --bv-surface-2:    #fdf6ec;   /* subtle raised / alt rows */
    --bv-surface-3:    #f6ecdb;   /* hover / input fill */
    --bv-charcoal:     #1f2121;   /* primary text */
    --bv-ink:          #2b2d2d;   /* body text */
    --bv-ink-soft:     #5b5e5e;   /* secondary text */
    --bv-ink-faint:    #8a8d8d;   /* tertiary / captions */

    /* The JDMIS "gold" is actually sunset orange */
    --bv-gold:         #e38a2e;   /* primary accent / brand */
    --bv-gold-hover:   #d17a1f;
    --bv-gold-soft:    #fbe7d2;   /* tinted backgrounds */
    --bv-gold-deep:    #b56815;

    /* Colourful JDMIS accent system (tool categories / states) */
    --bv-ocean:        #008fce;   /* ocean blue */
    --bv-rose:         #cf6698;   /* rose pink */
    --bv-lime:         #acc73b;   /* lime green */
    --bv-crimson:      #da4030;   /* crimson red */
    --bv-jade:         #2e9d7e;   /* success / money */
    --bv-violet:       #7b5ea7;   /* extra accent */

    /* Semantic */
    --bv-success:      var(--bv-lime);
    --bv-warning:      var(--bv-gold);
    --bv-error:        var(--bv-crimson);
    --bv-info:         var(--bv-ocean);

    /* Lines & shadows */
    --bv-line:         #e8dfce;   /* hairline border */
    --bv-line-soft:    #f0e8d8;
    --bv-shadow-sm:    0 1px 3px rgba(60,45,20,.08), 0 1px 2px rgba(60,45,20,.06);
    --bv-shadow:       0 4px 14px rgba(60,45,20,.10);
    --bv-shadow-lg:    0 18px 40px rgba(60,45,20,.16);

    /* ---- Typography ---- */
    --bv-font-display: 'Roboto Slab', Georgia, 'Times New Roman', serif;
    --bv-font-body:    'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Type scale (fluid clamp) */
    --bv-fs-xs:   0.75rem;
    --bv-fs-sm:   0.875rem;
    --bv-fs-base: 1rem;
    --bv-fs-md:   1.125rem;
    --bv-fs-lg:   1.375rem;
    --bv-fs-xl:   clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
    --bv-fs-2xl:  clamp(2rem, 1.4rem + 2.6vw, 3rem);
    --bv-fs-3xl:  clamp(2.6rem, 1.8rem + 3.6vw, 4rem);

    --bv-lh-tight: 1.15;
    --bv-lh-snug:  1.35;
    --bv-lh-base:  1.65;

    /* ---- Spacing scale ---- */
    --bv-sp-1: 4px;
    --bv-sp-2: 8px;
    --bv-sp-3: 12px;
    --bv-sp-4: 16px;
    --bv-sp-5: 24px;
    --bv-sp-6: 32px;
    --bv-sp-7: 48px;
    --bv-sp-8: 64px;
    --bv-sp-9: 96px;

    /* ---- Radius ---- */
    --bv-radius-sm: 8px;
    --bv-radius:    12px;
    --bv-radius-lg: 18px;
    --bv-radius-pill: 999px;

    /* ---- Layout ---- */
    --bv-maxw:    1200px;
    --bv-maxw-narrow: 760px;
    --bv-sidebar: 248px;
    --bv-rail:    320px;

    /* ---- Motion ---- */
    --bv-ease:    cubic-bezier(0.2, 0.8, 0.2, 1);
    --bv-fast:    0.15s;
    --bv-med:     0.28s;

    /* ---- Z-index ---- */
    --bv-z-header: 100;
    --bv-z-overlay: 900;
    --bv-z-modal: 1000;
    --bv-z-toast: 1100;

    color-scheme: light;
}

/* ---- Dark mode (infrastructure wired; visual pass follows light approval) ---- */
[data-theme="dark"] {
    --bv-cream:        #14110d;
    --bv-surface:      #1d1a15;
    --bv-surface-2:    #25211a;
    --bv-surface-3:    #2e2820;
    --bv-charcoal:     #f7f1e6;
    --bv-ink:          #ebe3d4;
    --bv-ink-soft:     #b3aa98;
    --bv-ink-faint:    #837b6c;
    --bv-gold-soft:    #3a2a17;
    --bv-line:         #39332a;
    --bv-line-soft:    #2e2820;
    --bv-shadow-sm:    0 1px 3px rgba(0,0,0,.4);
    --bv-shadow:       0 6px 18px rgba(0,0,0,.45);
    --bv-shadow-lg:    0 22px 48px rgba(0,0,0,.6);
    color-scheme: dark;
}

/* ---- Base reset scoped to v2 ---- */
/* Paint the document background with the theme colour so the area BEHIND
   sticky/fixed elements (topbar, generate bar gradient, mobile overscroll)
   matches the app — otherwise the default white body shows through in dark
   mode, making the top nav look light. */
html, body {
    margin: 0;
    background: var(--bv-cream);
    color: var(--bv-ink);
    /* Prevent the stray horizontal scroll on mobile caused by sticky/fixed
       bars and any child that happens to be exactly viewport-wide. */
    overflow-x: hidden;
}
.bv-root,
.bv-root * { box-sizing: border-box; }

.bv-root {
    margin: 0;
    padding: 0;
    background: var(--bv-cream);
    color: var(--bv-ink);
    font-family: var(--bv-font-body);
    font-size: var(--bv-fs-base);
    line-height: var(--bv-lh-base);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.bv-root h1, .bv-root h2, .bv-root h3, .bv-root h4 {
    font-family: var(--bv-font-display);
    color: var(--bv-charcoal);
    margin: 0;
    line-height: var(--bv-lh-tight);
    font-weight: 700;
}
.bv-root p { margin: 0 0 var(--bv-sp-4); }
.bv-root a { color: var(--bv-gold-deep); }
.bv-root img { max-width: 100%; height: auto; display: block; }
.bv-root :focus-visible {
    outline: 3px solid rgba(227,138,46,.5);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Shared utility */
.bv-hidden { display: none !important; }