/* ============================================================
   Soofos Redesign — Design tokens & shared component classes
   NEW BRAND: Mulish, Soofos blues, red-convert buttons, 8px radius.
   Variable names are stable so var() references across pages
   pick up the new brand automatically.
   ============================================================ */

:root {
  /* Brand blues (the 5 Soofos tints) */
  --blue:           #639ce0;   /* Klassiek — PRIMARY blue */
  --blue-hover:     #327dd6;   /* Helder — hover/darker */
  --deep-blue:      #2261ab;   /* Donker — deep text/accents */
  --blue-fill:      #e6effa;   /* Licht — soft fills/tints */
  --blue-tint:      #f6f9fd;   /* Achtergrond — page background */
  --blue-border:    #dbe3ee;
  --blue-on-navy:   #639ce0;

  /* Ink & neutrals */
  --ink:            #21344b;   /* navy — headings */
  --ink-2:          #2b4c74;   /* lighter navy — gradient partner on navy cards */
  --ink-soft:       #2261ab;   /* secondary navy/accent */
  --body:           #333333;
  --body-2:         #444444;
  --near-ink:       #333333;
  --muted:          #5a6b7a;
  --muted-2:        #7d8a99;
  --faint:          #a7b2c0;

  /* Surfaces */
  --page:           #f6f9fd;   /* light page background */
  --canvas:         #eef1f6;   /* cool strip / deeper bg */
  --white:          #ffffff;
  --strip:          #eef1f6;   /* cool strip / search pill */

  /* Borders */
  --card-border:    #dbe3ee;
  --input-border:   #dbe3ee;
  --dash-border:    #a7b2c0;

  /* Danger / destructive UI */
  --red-danger:     #d32f2f;   /* destructive UI: delete account, form errors */
  --error:          #c0392b;   /* error status text */
  --amber-ink:      #8a6a2b;   /* star ratings / amber-on-light text */

  /* Convert / status button colors */
  --red:            #ff4859;   /* convert / buy / pay */
  --red-hover:      #e43f42;
  --red-ink:        #c22c3a;
  --red-fill:       #ffe7ea;
  --green:          #22b66d;   /* save / positive */
  --green-hover:    #12925a;
  --green-fill:     #e6f6ee;
  --green-ink:      #12925a;

  /* Supporting palette (accents only — fill / ink / solid) */
  --purple:         #963eff; --purple-fill:#efe6ff; --purple-ink:#6a1ff0;
  --lightblue:      #0bb9f7; --lightblue-fill:#dcf5ff; --lightblue-ink:#0784b3;
  --orange:         #ff7417; --orange-fill:#ffece0; --orange-ink:#d1520a;
  --yellow:         #fbd607; --yellow-fill:#fdf6cf; --yellow-ink:#8a6a2b;
  --red-cat:        #ff4859; --red-cat-fill:#ffe7ea; --red-cat-ink:#c22c3a;

  /* Amber-named vars kept as aliases → now the yellow system (legacy refs) */
  --amber:          #fbd607;
  --amber-badge-tx: #8a6a2b;
  --amber-fill:     #fdf6cf;
  --amber-fill-2:   #fdf6cf;
  --amber-text:     #8a6a2b;
  --amber-text-2:   #8a6a2b;

  /* Player dark */
  --player-dark:    #21344b;

  /* Rating stars — a brighter gold than the amber/yellow system, reserved for
     star ratings only (course rating, review stars). */
  --star:           #E8A33D;
  --star-track:     #eef1f6;

  /* Text tones on the dark navy hero (player-dark surface). White for primary,
     progressively softer blues for secondary/meta text on navy. */
  --on-navy:        #ffffff;
  --on-navy-strong: #cfe0f5;
  --on-navy-muted:  #b9c6d8;
  --on-navy-faint:  #9db4d1;
  --on-navy-line:   rgba(255,255,255,.28);
  --on-navy-fill:   rgba(255,255,255,.15);

  /* Radii & shadow */
  --r-pill:  999px;   /* chips / tags only */
  --r-btn:   8px;     /* buttons */
  --r-card:  16px;
  --r-card-sm: 12px;
  --r-card-lg: 20px;
  --shadow-card: 0 8px 24px rgba(33,52,75,.10);
  --shadow-soft: 0 1px 3px rgba(33,52,75,.08);
  --shadow-pop:  0 8px 24px rgba(33,52,75,.14);
  --overlay:     rgba(33,52,75,.5);   /* modal/backdrop scrim — ink @ 50% */

  /* Layout */
  --container-max: 1240px;   /* boxed content width for public pages (matches home sections) */

  --font: 'Mulish', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
}