/* =====================================================================
   OGNIMOHUB — Brand Design System / Token Override Layer
   ---------------------------------------------------------------------
   Purpose : Introduce the Ognimohub visual identity (colors, radii,
             spacing, motion) on top of the existing Envato "basic"
             template WITHOUT modifying main.css, custom.css, or
             color.php.

   How it works:
   The base template already exposes an HSL custom-property system
   (--base-h/s/l, --base-two-h/s/l, --success-h/s/l, etc.) that
   color.php normally generates from admin-panel settings. This file
   is loaded AFTER main.css/custom.css/color.php in the document head,
   so its :root declarations simply take precedence and re-point every
   component that already consumes those tokens (buttons, badges,
   alerts, links, borders, gradients) to the Ognimohub palette — with
   zero changes to Envato core files.

   Scope of this pass (Step 3 of the frontend roadmap):
     1. Brand color tokens (primary / accent / semantic)
     2. Radius, spacing, and motion tokens per brand guidelines
     3. Dark-mode surface tokens + safe, low-risk global application
        (page canvas / body background)

   NOT included yet (deliberately — see project notes):
     - Full per-component dark theming of cards, tables, modals, and
       dashboards. Several existing rules hardcode literal colors
       (e.g. explicit #fff) instead of theme tokens, so a blanket
       override of shared variables like --dark or --section-bg would
       risk breaking legibility on components not yet audited.
       These are migrated deliberately, component by component, in
       the "Redesign Existing Pages" step so nothing regresses.
   ===================================================================== */

:root {
    /* ---------------------------------------------------------------
       1. BRAND COLOR TOKENS
       Values below are pre-converted to the H/S/L triplets the base
       theme expects (see color.php + main.css :root for the pattern).
       ----------------------------------------------------------------- */

    /* Primary — Purple 600 #6C3EF4 (main brand action color) */
    --base-h: 255;
    --base-s: 89%;
    --base-l: 60%;

    /* Secondary / gradient partner — Purple 500 #7C4DFF */
    --base-two-h: 256;
    --base-two-s: 100%;
    --base-two-l: 65%;

    /* Semantic colors, aligned to brand guide */
    --success-h: 142; --success-s: 76%; --success-l: 36%;   /* #16A34A */
    --danger-h: 4;    --danger-s: 86%;  --danger-l: 58%;    /* #F04438 */
    --warning-h: 34;  --warning-s: 94%; --warning-l: 50%;   /* #F79009 */
    --info-h: 211;    --info-s: 95%;    --info-l: 58%;      /* #2E90FA */

    /* Raw brand palette (for one-off custom components / SVG fills) */
    --og-purple-700: 254 80% 55%;   /* #5B2EE8 */
    --og-purple-600: 255 89% 60%;   /* #6C3EF4 */
    --og-purple-500: 256 100% 65%;  /* #7C4DFF */
    --og-accent: 255 91% 76%;       /* #A78BFA */
    --og-gold: 46 65% 52%;          /* #D4AF37 — sparing, premium accents only */

    /* Dark theme surfaces (brand guide "Dark Theme" table) */
    --og-dark-bg: 250 51% 9%;         /* #0F0B22 */
    --og-dark-surface: 245 37% 13%;   /* #17152E */
    --og-dark-elevated: 247 39% 19%;  /* #211D42 */
    --og-dark-text: 0 0% 100%;        /* #FFFFFF */
    --og-dark-secondary: 229 35% 84%; /* #C9CEE5 */
    --og-dark-border: 247 24% 24%;

    /* Light theme surfaces (kept available for light-mode toggle / PDFs / emails) */
    --og-light-bg: 240 33% 98%;        /* #FAFAFC */
    --og-light-surface: 0 0% 100%;     /* #FFFFFF */
    --og-light-text: 227 25% 11%;      /* #151823 */
    --og-light-secondary: 221 12% 41%; /* #5C6475 */

    /* ---------------------------------------------------------------
       2. SPACING (8pt grid, per brand guide)
       ----------------------------------------------------------------- */
    --og-space-1: 8px;
    --og-space-2: 16px;
    --og-space-3: 24px;
    --og-space-4: 32px;
    --og-space-6: 48px;
    --og-space-8: 64px;

    /* ---------------------------------------------------------------
       3. RADIUS (per brand guide: buttons 14px / cards 20px / dialogs 24px)
       Re-points Bootstrap 5's own radius variables so native Bootstrap
       components (.card, .modal-content, .dropdown-menu, .alert) pick
       these up automatically with no markup changes.
       ----------------------------------------------------------------- */
    --og-radius-btn: 14px;
    --og-radius-card: 20px;
    --og-radius-dialog: 24px;

    --bs-border-radius: var(--og-radius-card);
    --bs-border-radius-sm: 10px;
    --bs-border-radius-lg: var(--og-radius-dialog);
    --bs-border-radius-xl: var(--og-radius-dialog);
    --bs-border-radius-pill: 50rem;

    /* ---------------------------------------------------------------
       4. MOTION (per brand guide: calm, premium timings)
       ----------------------------------------------------------------- */
    --og-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --og-dur-hover: 150ms;
    --og-dur-press: 120ms;
    --og-dur-card: 220ms;
    --og-dur-dialog: 250ms;
    --og-dur-drawer: 300ms;
}

/* =====================================================================
   DARK MODE — PUBLIC FRONTEND ONLY (Phase 1)
   ---------------------------------------------------------------------
   main.css consistently pairs these five tokens across every section
   and component: --section-bg (surface), --heading-color, --body-color,
   --text-color, --border-color. Flipping them together keeps contrast
   correct everywhere they're used together (hero, section cards,
   testimonials, feature blocks, etc.) instead of the canvas-only change
   from the previous pass, which broke heading legibility.

   Scoped to public pages via :has(.dashboard) — the User/Agent/Merchant/
   Admin panels wrap their content in a `.dashboard` element (see
   layouts/master.blade.php, agent.blade.php, merchant.blade.php), so this
   selector reliably detects "is this a dashboard page" without adding any
   class to existing views. Dashboards keep their original light tokens
   and are reskinned deliberately in a later, reviewed step.
   ===================================================================== */

:root:not(:has(.dashboard)) {
    --section-bg: var(--og-dark-surface);
    --heading-color: var(--og-dark-text);
    --body-color: var(--og-dark-secondary);
    --text-color: var(--og-dark-secondary);
    --border-color: var(--og-dark-border);
    --bs-card-bg: hsl(var(--og-dark-surface));
}

body:not(:has(.dashboard)) {
    background-color: hsl(var(--og-dark-bg));
}

/* Fix: FAQ "load more" fade mask was hardcoded to fade to solid white,
   which reads as a harsh white bar over the new dark surface. Fade to
   the dark surface color instead so the mask still works as intended. */
:not(:has(.dashboard)) .faq-wrapper::after {
    background: linear-gradient(180deg, transparent 0%, hsl(var(--og-dark-surface)) 100%);
}

/* Fix: the app-download box used a hardcoded light gradient (#dbe8fe →
   #ccfbf6), independent of any token. With headings now white site-wide,
   white text on that light box became unreadable. Replaced with a brand
   gradient so contrast holds and it reads as an intentional dark-mode
   surface rather than a leftover light-theme box. */
:not(:has(.dashboard)) .cta-wrapper {
    background: linear-gradient(90deg, hsl(var(--og-purple-700) / 0.55) -27.62%, hsl(var(--og-dark-elevated)) 100%);
}

/* .btn already carries its own border-radius; align it to the brand token
   without altering padding, sizing, or any other existing button rules. */
.btn {
    border-radius: var(--og-radius-btn);
    transition: all var(--og-dur-hover) var(--og-ease);
}

.card,
.dropdown-menu,
.modal-content {
    transition: box-shadow var(--og-dur-card) var(--og-ease),
        transform var(--og-dur-card) var(--og-ease);
}

.modal.fade .modal-dialog {
    transition: transform var(--og-dur-dialog) var(--og-ease),
        opacity var(--og-dur-dialog) var(--og-ease);
}