/* ===========================================================================
   FLASHMAC — COLOR TOKENS
   Brand: refurbished gaming + Mac/Windows computers. Minimal-clean meets
   aggressive gaming energy. Signature is the orange→pink "flash" gradient
   with a deep electric-violet as the third pole.
   =========================================================================== */

:root {
  /* ---- Brand core (from logo) ------------------------------------------- */
  --flash-orange: #F5956F;   /* arancione — warm energy, the "flash" */
  --flash-pink:   #EB3F93;   /* rosa — the "mac", hot accent */
  --flash-violet: #7E49F2;   /* viola scuro — deep electric, gaming pole */

  /* Tints / shades of each brand pole (computed harmonious steps) */
  --orange-50:  #FEF2EC;
  --orange-200: #FBD2C0;
  --orange-400: #F8AC8C;
  --orange-500: #F5956F;
  --orange-600: #E9774A;
  --orange-700: #C95B30;

  --pink-50:  #FDE9F2;
  --pink-200: #F8B9D6;
  --pink-400: #F06FAE;
  --pink-500: #EB3F93;
  --pink-600: #D11F77;
  --pink-650: #BE1A6A;  /* AA body-link pink (5.4:1 on --ink-50, 5.9:1 on white) */
  --pink-700: #A8155C;

  --violet-50:  #F0EAFE;
  --violet-200: #CFBDFB;
  --violet-400: #9D74F6;
  --violet-500: #7E49F2;
  --violet-600: #6831D6;
  --violet-700: #5022A8;

  /* ---- Signature gradients ---------------------------------------------- */
  --grad-flash:  linear-gradient(100deg, var(--flash-orange) 0%, var(--flash-pink) 100%);
  --grad-surge:  linear-gradient(120deg, var(--flash-orange) 0%, var(--flash-pink) 52%, var(--flash-violet) 100%);
  --grad-violet: linear-gradient(135deg, var(--flash-pink) 0%, var(--flash-violet) 100%);
  --grad-ink:    linear-gradient(180deg, #1A1626 0%, #0D0B14 100%); /* @kind color */

  /* ---- Neutrals — cool ink with a faint violet bias --------------------- */
  --ink-950: #0D0B14;   /* near-black, primary dark surface */
  --ink-900: #14111F;
  --ink-800: #1E1A2E;
  --ink-700: #2B2640;
  --ink-600: #3C3556;
  --ink-500: #564E73;
  --ink-450: #696180;   /* AA secondary text on light surfaces (5.3:1 on --ink-50) */
  --ink-400: #7B7397;
  --ink-350: #948CAF;   /* AA secondary text on dark surfaces (5.3:1 on --ink-800) */
  --ink-300: #A39CBC;
  --ink-200: #C9C4DA;
  --ink-100: #E7E4F0;
  --ink-50:  #F5F3FA;
  --white:   #FFFFFF;

  /* Darkest steps of the two feedback hues. The palette above has no green or
     amber ramp because those hues were only ever FILLS (bars, pills, dots);
     as TEXT on a light surface --success measures 2.38:1 and --warning 2.04:1.
     Added 2026-09-17 on the client's instruction, with the client's values.
     Same naming as the other ramps (…-700 is the darkest step). */
  --green-700: #17703E;   /* 6.13:1 on white — semantic green for TEXT, light only */
  --amber-700: #A6650A;   /* 4.68:1 on white — semantic amber for TEXT, light only */

  /* ---- Semantic feedback ------------------------------------------------ */
  --success: #2FBF71;
  --success-bg: #E4F7EE;
  --warning: #F5A524;
  --warning-bg: #FDF0DA;
  --danger:  #F03E5C;
  --danger-bg: #FDE6EA;
  --info:    var(--flash-violet);
  --info-bg: var(--violet-50);

  /* Condition badges (refurb grades) */
  --grade-a: #2FBF71;   /* pristine */
  --grade-b: var(--flash-orange);
  --grade-c: #F5A524;

  /* =====================================================================
     SEMANTIC ALIASES — reference these in components, not raw palette.
     Defaults below describe the LIGHT surface context.
     ===================================================================== */
  --bg-base:        var(--ink-50);
  --bg-subtle:      var(--white);
  --surface-card:   var(--white);
  --surface-sunken: var(--ink-50);
  --surface-raised: var(--white);
  --surface-photo:  var(--white);

  --text-strong:    var(--ink-950);
  --text-body:      var(--ink-800);
  --text-secondary: var(--ink-450);  /* AA ≥4.5:1 — use for ALL informative secondary text */
  --text-muted:     var(--ink-400);  /* NOT AA — decorative/disabled only, never informative copy */
  --text-inverse:   var(--white);
  --text-brand:     var(--flash-pink);

  /* Body links: --accent (pink-500) is only 3.4:1 on --bg-base, so links in
     running text use their own token, not the accent. */
  --link:       var(--pink-650);
  --link-hover: var(--pink-700);

  --border-subtle: var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-brand:  var(--flash-pink);

  --accent:        var(--flash-pink);
  --accent-hover:  var(--pink-600);
  --accent-press:  var(--pink-700);
  --accent-soft:   var(--pink-50);
  --on-accent:     var(--white);

  /* Testo sopra una campitura Flash (--grad-flash, --grad-surge, --accent
     pieno). Il bianco NON regge: misura 2,23:1 sull'estremo arancio del
     gradiente e 3,71:1 sul rosa, contro i 4,5:1 richiesti. INK[950] sta fra
     5,27:1 e 8,75:1, cioe' sopra soglia su tutta la rampa.
     Deliberatamente NON ridichiarato in .theme-dark: la campitura Flash e' la
     stessa nei due temi, quindi il testo che ci sta sopra non deve seguire il
     tema. Per questo non si usa --text-inverse, che in chiaro torna bianco.
     Aggiunto il 2026-09-27 (MON-50) dopo la verifica sul Social & Ads Kit. */
  --on-flash:      var(--ink-950);

  /* The brand hues when they are TEXT rather than a fill. --accent and
     --text-brand are calibrated as fills: as text they measure 3.37-3.71:1 on
     the light surfaces. These aliases carry the same role at AA, and in the
     dark context they resolve back to the very tokens they shadow — the dark
     values are already ≥5:1 and must not move. Fills, borders and underlines
     keep using --accent / --text-brand: the threshold is for text. */
  --accent-text:   var(--pink-650);   /* 5.9:1 on --white, 5.4:1 on --ink-50 */
  --text-brand-aa: var(--pink-650);
  --success-text:  var(--green-700);
  --warning-text:  var(--amber-700);

  --focus-ring: var(--flash-violet);
}

/* ===========================================================================
   DARK CONTEXT — the gaming face. Add class "theme-dark" to any container
   to flip semantic aliases to the ink surfaces. (Deliberately NOT bound to
   [data-theme="dark"] to avoid inheriting the host app's appearance.)
   =========================================================================== */
.theme-dark {
  --bg-base:        var(--ink-950);
  --bg-subtle:      var(--ink-900);
  --surface-card:   var(--ink-900);
  --surface-sunken: var(--ink-950);
  --surface-raised: var(--ink-800);
  --surface-photo:  var(--white); /* real product photography ships on pure white — must match exactly, not just a light tint, or the photo's own white shows a seam against the plate */

  --text-strong:    var(--white);
  --text-body:      var(--ink-100);
  --text-secondary: var(--ink-350);  /* AA ≥4.5:1 on ink-950/900/800 */
  --text-muted:     var(--ink-400);  /* NOT AA — decorative/disabled only */
  --text-inverse:   var(--ink-950);
  --text-brand:     var(--flash-orange);

  --link:       var(--pink-400);
  --link-hover: var(--pink-200);

  --border-subtle: var(--ink-800);
  --border-default: var(--ink-700);
  --border-strong: var(--ink-600);
  --border-brand:  var(--flash-pink);

  --accent:        var(--flash-pink);
  --accent-hover:  var(--pink-400);
  --accent-press:  var(--pink-200);
  --accent-soft:   rgba(235, 63, 147, 0.16);
  --on-accent:     var(--white);

  /* --on-flash non si ridichiara qui: vedi il commento nel blocco :root.
     La campitura Flash non cambia col tema, quindi nemmeno il suo testo. */

  /* Dark needs no AA variant: the fills already measure 5.01:1 (accent),
     8.33:1 (brand), 7.8:1 (success) and 9.11:1 (warning) on the ink surfaces.
     The aliases resolve to the same tokens, so nothing changes here. */
  --accent-text:   var(--accent);
  --text-brand-aa: var(--text-brand);
  --success-text:  var(--success);
  --warning-text:  var(--warning);

  /* Semantic feedback backgrounds — the light tints above are unreadable on
     ink surfaces. Same hues at low alpha so WooCommerce's three system
     messages (conferma / avviso / errore) keep --text-body legible in dark. */
  --success-bg: rgba(47, 191, 113, 0.16);
  --warning-bg: rgba(245, 165, 36, 0.16);
  --danger-bg:  rgba(240, 62, 92, 0.18);
  --info-bg:    rgba(126, 73, 242, 0.24);
}