/* =============================================================================
   secret.onfiremedia.com — design tokens
   Owner: design. Copy verbatim into public/tokens.css.

   THEMING CONTRACT
   1. The complete LIGHT palette is defined on bare :root.
   2. Only the tokens that change are redefined for dark, in TWO places:
        @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { … } }
        :root[data-theme="dark"] { … }
      >>> THOSE TWO BLOCKS MUST STAY BYTE-IDENTICAL. Edit both or neither. <<<
   3. No color is EVER defined only inside a media query or [data-theme] block.
   4. Nothing here loads an external resource. No @import, no @font-face, no url().
   ============================================================================= */

:root {
  color-scheme: light;

  /* ---------------------------------------------------------------------------
     BRAND SOURCE COLORS — lifted from onfiremedia.com's Elementor global kit
     (https://onfiremedia.com/wp-content/uploads/elementor/css/post-9.css)
     Do not invent new brand hues; derive from these.
     --------------------------------------------------------------------------- */
  --brand-orange:        #FF6727;  /* --e-global-color-46cfada — the OFM orange   */
  --brand-orange-stroke: #FF6A2F;  /* icon-stroke variant used in site SVGs       */
  --brand-violet:        #4500A4;  /* --e-global-color-1980590                    */
  --brand-amber:         #FFBC7D;  /* Elementor page-transition color             */
  --brand-black:         #000000;  /* --e-global-color-35563e0 (body text on site)*/
  --brand-paper:         #F7F7F7;  /* --e-global-color-52e36a9                    */

  /* ---------------------------------------------------------------------------
     SURFACES (light)
     A violet-cast near-white, not a warm cream. Derived from --brand-violet.
     --------------------------------------------------------------------------- */
  --bg:            #F4F3F7;
  --surface:       #FFFFFF;
  --surface-sunken:#ECEAF2;   /* recessed wells: textarea, secret block, code     */
  --surface-hover: #F4F3F7;
  --scrim:         rgba(22, 18, 28, 0.55);

  /* ---------------------------------------------------------------------------
     INK (light)   ink=body, ink-2=secondary, ink-3=tertiary/placeholder
     --------------------------------------------------------------------------- */
  --ink:    #16121C;
  --ink-2:  #5A5470;
  --ink-3:  #6B6480;
  --ink-on-brand: #16121C;   /* text that sits ON --brand-orange */
  --ink-inverse:  #FFFFFF;

  /* ---------------------------------------------------------------------------
     LINES
     --line        hairline separators (decorative, no contrast requirement)
     --line-strong input borders + control outlines (must clear 3:1 vs surface)
     --------------------------------------------------------------------------- */
  --line:        #DDD9E6;
  --line-strong: #8F88A6;

  /* ---------------------------------------------------------------------------
     INTERACTIVE
     --accent   brand color safe for TEXT (links, inline emphasis)  >= 4.5:1
     --graphic  brand color safe for MEANINGFUL GRAPHICS (slider fills,
                ember marks, icon strokes)                          >= 3:1
     --focus    focus ring                                          >= 3:1
     Never use raw --brand-orange for text or for a load-bearing graphic in
     light mode: it is 2.91:1 on white.
     --------------------------------------------------------------------------- */
  --accent:       #B4400A;
  --accent-hover: #93340A;
  --graphic:      #D8480D;
  --focus:        #4500A4;

  /* Primary button: near-black ink on the true brand orange (6.35:1). */
  --btn-primary-bg:       #FF6727;
  --btn-primary-bg-hover: #F65A16;
  --btn-primary-ink:      #16121C;
  --btn-primary-glow:     rgba(255, 103, 39, 0.42);

  /* ---------------------------------------------------------------------------
     SEMANTIC
     --------------------------------------------------------------------------- */
  --danger:      #C02411;
  --danger-bg:   #FDECE9;
  --danger-line: #E4A99E;
  --ok:          #0F7A52;
  --ok-bg:       #E6F4EC;
  --ok-line:     #9CCDB4;
  --warn:        #B4400A;
  --warn-bg:     #FFF1E9;
  --warn-line:   #EFBB9A;
  --info:        #4500A4;
  --info-bg:     #F0EBFA;
  --info-line:   #C3B0E4;

  /* ---------------------------------------------------------------------------
     SHADOW — used sparingly. One elevation, plus the button glow.
     --------------------------------------------------------------------------- */
  --shadow-sheet: 0 1px 2px rgba(22, 18, 28, 0.05), 0 12px 32px -18px rgba(22, 18, 28, 0.30);
  --shadow-pop:   0 2px 4px rgba(22, 18, 28, 0.07), 0 18px 40px -20px rgba(22, 18, 28, 0.40);

  /* ---------------------------------------------------------------------------
     TYPEFACES — system stacks only. Zero network requests.
     OFM's site uses Outfit (geometric sans, headings at weight 900). We cannot
     load it, so --font-display picks the nearest geometric-humanist faces that
     ship with each OS, and we recover the personality with weight (800) and
     negative tracking rather than with the file.
     --------------------------------------------------------------------------- */
  --font-display: "Avenir Next", "Avenir", "Futura", "Segoe UI Variable Display",
                  "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                  Arial, "Noto Sans", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", SFMono-Regular, "Menlo", "Cascadia Mono",
                  "Segoe UI Mono", "Roboto Mono", "Liberation Mono", "Courier New", monospace;

  /* TYPE SCALE — fluid where it earns it */
  --step--2: 0.6875rem;  /* 11px  eyebrows, meta, counters      */
  --step--1: 0.8125rem;  /* 13px  hint + help text              */
  --step-0:  1.0625rem;  /* 17px  body (OFM sets 18px; 17 reads better in a tool) */
  --step-1:  1.1875rem;  /* 19px  lead-in paragraphs            */
  --step-2:  1.4375rem;  /* 23px  section headings              */
  --step-3:  clamp(1.6875rem, 1.42rem + 1.20vw, 2.125rem);  /* h2 */
  --step-4:  clamp(2.0625rem, 1.60rem + 2.05vw, 2.9375rem);  /* h1 */

  --lh-tight: 1.08;
  --lh-snug:  1.28;
  --lh-body:  1.6;
  --lh-loose: 1.7;

  --track-display: -0.028em;
  --track-eyebrow:  0.09em;

  /* SPACING — 4px base */
  --sp-0:  0;
  --sp-1:  0.25rem;   /*  4 */
  --sp-2:  0.5rem;    /*  8 */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-5:  1.25rem;   /* 20 */
  --sp-6:  1.5rem;    /* 24 */
  --sp-7:  2rem;      /* 32 */
  --sp-8:  2.5rem;    /* 40 */
  --sp-9:  3.5rem;    /* 56 */
  --sp-10: 5rem;      /* 80 */

  /* RADII — 10px is the OFM button radius from the Elementor kit */
  --r-sm:   6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-pill: 999px;

  /* MEASURE */
  --shell-form:   44rem;
  --shell-narrow: 34rem;
  --shell-pad:    var(--sp-4);

  /* MOTION — one duration for state, one for the single orchestrated moment */
  --dur-fast: 120ms;
  --dur-slow: 240ms;
  --ease:     cubic-bezier(0.2, 0, 0.1, 1);

  /* CONTROL METRICS — 44px min target everywhere (WCAG 2.2 SC 2.5.8) */
  --control-h: 2.75rem;   /* 44px */
  --control-h-lg: 3.25rem;
  --ring-w: 3px;
  --ring-offset: 2px;
}

/* =============================================================================
   DARK — BLOCK 1 of 2 (system preference, unless the user forced light)
   >>> KEEP IDENTICAL TO BLOCK 2 <<<
   ============================================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:            #0F0C14;
    --surface:       #17131E;
    --surface-sunken:#100D16;
    --surface-hover: #1F1A2A;
    --scrim:         rgba(5, 3, 8, 0.68);

    --ink:    #F2EFF7;
    --ink-2:  #A79FBC;
    --ink-3:  #948CAD;
    --ink-on-brand: #16121C;
    --ink-inverse:  #16121C;

    --line:        #2E2839;
    --line-strong: #6B6383;

    --accent:       #FF8A55;
    --accent-hover: #FFA575;
    --graphic:      #FF6727;
    --focus:        #FFB08A;

    --btn-primary-bg:       #FF6727;
    --btn-primary-bg-hover: #FF7F45;
    --btn-primary-ink:      #16121C;
    --btn-primary-glow:     rgba(255, 103, 39, 0.34);

    --danger:      #FF8A75;
    --danger-bg:   #241318;
    --danger-line: #5A2A28;
    --ok:          #45E39E;
    --ok-bg:       #0E1F19;
    --ok-line:     #1F4A38;
    --warn:        #FFB08A;
    --warn-bg:     #241A13;
    --warn-line:   #55392A;
    --info:        #B79BFF;
    --info-bg:     #1A1430;
    --info-line:   #382C63;

    --shadow-sheet: 0 1px 2px rgba(0, 0, 0, 0.55), 0 12px 32px -18px rgba(0, 0, 0, 0.85);
    --shadow-pop:   0 2px 4px rgba(0, 0, 0, 0.6),  0 18px 40px -20px rgba(0, 0, 0, 0.9);
  }
}

/* =============================================================================
   DARK — BLOCK 2 of 2 (explicit user choice, persisted in localStorage)
   >>> KEEP IDENTICAL TO BLOCK 1 <<<
   ============================================================================= */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #0F0C14;
  --surface:       #17131E;
  --surface-sunken:#100D16;
  --surface-hover: #1F1A2A;
  --scrim:         rgba(5, 3, 8, 0.68);

  --ink:    #F2EFF7;
  --ink-2:  #A79FBC;
  --ink-3:  #948CAD;
  --ink-on-brand: #16121C;
  --ink-inverse:  #16121C;

  --line:        #2E2839;
  --line-strong: #6B6383;

  --accent:       #FF8A55;
  --accent-hover: #FFA575;
  --graphic:      #FF6727;
  --focus:        #FFB08A;

  --btn-primary-bg:       #FF6727;
  --btn-primary-bg-hover: #FF7F45;
  --btn-primary-ink:      #16121C;
  --btn-primary-glow:     rgba(255, 103, 39, 0.34);

  --danger:      #FF8A75;
  --danger-bg:   #241318;
  --danger-line: #5A2A28;
  --ok:          #45E39E;
  --ok-bg:       #0E1F19;
  --ok-line:     #1F4A38;
  --warn:        #FFB08A;
  --warn-bg:     #241A13;
  --warn-line:   #55392A;
  --info:        #B79BFF;
  --info-bg:     #1A1430;
  --info-line:   #382C63;

  --shadow-sheet: 0 1px 2px rgba(0, 0, 0, 0.55), 0 12px 32px -18px rgba(0, 0, 0, 0.85);
  --shadow-pop:   0 2px 4px rgba(0, 0, 0, 0.6),  0 18px 40px -20px rgba(0, 0, 0, 0.9);
}

/* Explicit light — nothing to remap, but pin color-scheme so the UA paints
   form controls and scrollbars light even on a dark OS. */
:root[data-theme="light"] { color-scheme: light; }