/* ============================================================
   CARMEYAN POWER — DESIGN TOKENS
   Semantic theme system: DARK is the default experience,
   html[data-theme="light"] flips every semantic token.
   Components never hardcode colors — they use these vars.
   ============================================================ */
:root{
  color-scheme:dark;

  /* --- canvas --- */
  --bg:        #080D18;            /* page background */
  --bg-rgb:    8,13,24;            /* same, as rgb triplet for scrims/blur bars */
  --bg-2:      #0A111F;            /* alternating section band */
  --surface:   #0E1626;            /* cards / panels */
  --surface-2: #131E36;            /* raised / hover surface */

  /* --- ink --- */
  --text:      #E7E1D6;
  --text-hi:   #F6F0E7;            /* headings / emphasis */
  --text-dim:  rgba(231,225,214,.62);
  --text-mute: rgba(231,225,214,.42);

  /* --- structure --- */
  --line:        rgba(163,186,224,.13);
  --line-strong: rgba(163,186,224,.32);
  --dot:         rgba(163,186,224,.10);

  /* --- accent --- */
  --accent:      #FA8436;
  --accent-2:    #FFA24D;
  --accent-text: #FFAD62;          /* orange that reads on the page bg */
  --accent-tint: rgba(250,132,54,.09);
  --accent-glow: rgba(250,132,54,.42);
  --safe:        #79D07C;

  /* --- inversion (hover fills that flip the scheme) --- */
  --invert-bg:   #F6F0E7;
  --invert-text: #101A2E;
  --invert-dim:  rgba(16,26,46,.62);
  --accent-inv:  #B85512;          /* accent that reads on the inverted fill */

  /* --- buttons --- */
  --btn-bg:        var(--accent);
  --btn-text:      #1A1008;
  --btn-fill:      #F6F0E7;        /* the slide-in hover fill */
  --btn-fill-text: #101A2E;

  /* --- misc --- */
  --hazard-a:  #0D1526;            /* dark stripe of the hazard divider */
  --shadow:    0 24px 70px rgba(0,0,0,.45);
  --hero-glow: rgba(8,13,24,.7);   /* headline text-shadow on the terrain */

  /* --- INSTRUMENT DECK (the product panel — always dark, both themes) --- */
  --deck-bg:#090806; --deck-surface:#151110; --deck-surface-2:#1B1613; --deck-surface-hi:#231C17;
  --deck-cream:#F6F0E7; --deck-text:#E7E0D5; --deck-muted:#B0A698;
  --deck-amber:#FF7A1A; --deck-amber-2:#FFA24D; --deck-amber-glow:rgba(255,122,26,.45);
  --deck-safe:#79D07C;

  /* --- typography --- */
  --fd:'Clash Display',sans-serif;
  --fb:'Satoshi',sans-serif;
  --fm:'Geist Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  /* --- motion / layout --- */
  --ease-hero: cubic-bezier(0.16,1,0.3,1);
  --nav-h: 64px;
  --gutter: clamp(20px, 4vw, 64px);
}

/* ============================================================
   LIGHT THEME
   ============================================================ */
html[data-theme="light"]{
  color-scheme:light;

  --bg:        #F6F0E7;
  --bg-rgb:    246,240,231;
  --bg-2:      #EFE8DB;
  --surface:   #FDFBF6;
  --surface-2: #FFFFFF;

  --text:      #1F2F51;
  --text-hi:   #15213C;
  --text-dim:  rgba(31,47,81,.68);
  --text-mute: rgba(31,47,81,.46);

  --line:        rgba(31,47,81,.14);
  --line-strong: rgba(31,47,81,.34);
  --dot:         rgba(31,47,81,.09);

  --accent:      #FA8436;
  --accent-2:    #E8731F;
  --accent-text: #B85512;
  --accent-tint: rgba(250,132,54,.12);
  --accent-glow: rgba(250,132,54,.35);
  --safe:        #2F8A57;

  --invert-bg:   #15213C;
  --invert-text: #F6F0E7;
  --invert-dim:  rgba(246,240,231,.62);
  --accent-inv:  #FFA24D;

  --btn-bg:        #1F2F51;
  --btn-text:      #FDFBF6;
  --btn-fill:      var(--accent);
  --btn-fill-text: #15213C;

  --hazard-a:  #1F2F51;
  --shadow:    0 20px 55px rgba(31,47,81,.12);
  --hero-glow: rgba(246,240,231,.7);
}

::selection{ background:#FA8436; color:#15213C; }