/* ============================================================
   Five by Five - Color System
   White / black canvas with confident colour pops.
   Primary pop: GREEN. Secondary: ORANGE + PINK (gradients).
   Extended: BLUE + PURPLE.
   ============================================================ */

:root {
  /* ---- Brand pops (raw) ---------------------------------- */
  --fbf-green:  #28dc9a;   /* primary pop */
  --fbf-orange: #ffa63e;   /* secondary pop */
  --fbf-pink:   #ff43a4;   /* gradient partner */
  --fbf-blue:   #00b9d7;   /* extended */
  --fbf-purple: #8c48e6;   /* extended */

  /* ---- Green scale (primary pop) ------------------------- */
  --green-50:  #e9fdf5;
  --green-100: #c9f9e5;
  --green-200: #97f0cd;
  --green-300: #5ce6b3;
  --green-400: #28dc9a;   /* = brand green */
  --green-500: #16c586;
  --green-600: #0aa871;
  --green-700: #08855a;
  --green-800: #0a6949;
  --green-900: #0a563d;

  /* ---- Orange scale (secondary pop) ---------------------- */
  --orange-50:  #fff6ea;
  --orange-100: #ffe8cc;
  --orange-200: #ffd19b;
  --orange-300: #ffbb6a;
  --orange-400: #ffa63e;  /* = brand orange */
  --orange-500: #f78e1a;
  --orange-600: #dd7208;
  --orange-700: #b65706;
  --orange-800: #90450a;
  --orange-900: #763a0e;

  /* ---- Pink scale (gradient / accent) -------------------- */
  --pink-50:  #ffeaf4;
  --pink-100: #ffcce3;
  --pink-200: #ff9ecb;
  --pink-300: #ff6fb2;
  --pink-400: #ff43a4;    /* = brand pink */
  --pink-500: #ed1f8b;
  --pink-600: #cc0f73;
  --pink-700: #a20d5c;
  --pink-800: #7f0f4a;
  --pink-900: #6a103f;

  /* ---- Blue scale (extended) ----------------------------- */
  --blue-50:  #e4fafe;
  --blue-100: #bff2fb;
  --blue-200: #84e6f5;
  --blue-300: #3fd6ec;
  --blue-400: #00b9d7;    /* = brand blue */
  --blue-500: #009cb8;
  --blue-600: #007e97;
  --blue-700: #06657a;
  --blue-800: #0d5163;
  --blue-900: #114453;

  /* ---- Purple scale (extended) --------------------------- */
  --purple-50:  #f3ecfe;
  --purple-100: #e5d6fd;
  --purple-200: #cbb0fa;
  --purple-300: #ad84f2;
  --purple-400: #8c48e6;  /* = brand purple */
  --purple-500: #7a34d6;
  --purple-600: #6725b8;
  --purple-700: #541e94;
  --purple-800: #451c76;
  --purple-900: #3a1a5f;

  /* ---- Red (functional only - errors/destructive) -------- */
  --red-50:  #ffecec;
  --red-100: #ffd0d0;
  --red-300: #ff8080;
  --red-400: #ff4d4d;
  --red-500: #ec2f2f;
  --red-600: #cc1f1f;

  /* ---- Neutral / Ink scale (high-contrast B&W) ----------- */
  --white:    #ffffff;
  --ink-50:   #f7f8f8;
  --ink-100:  #eef0f0;
  --ink-200:  #e0e3e3;
  --ink-300:  #c6cbcb;
  --ink-400:  #9aa1a1;
  --ink-500:  #6f7676;
  --ink-600:  #4c5252;
  --ink-700:  #333838;
  --ink-800:  #1c2020;
  --ink-900:  #0d0f0f;   /* near-black brand ink */
  --black:    #000000;

  /* ---- Gradients (the three official brand gradients) ---- */
  --gradient-signature: linear-gradient(105deg, var(--fbf-pink) 0%, var(--fbf-orange) 100%);   /* pink → orange */
  --gradient-berry:     linear-gradient(105deg, var(--fbf-pink) 0%, var(--fbf-purple) 100%);   /* pink → purple */
  --gradient-cool:      linear-gradient(105deg, var(--fbf-blue) 0%, var(--fbf-green) 100%);    /* blue → green */
  --gradient-spectrum:  linear-gradient(100deg, var(--fbf-purple) 0%, var(--fbf-pink) 45%, var(--fbf-orange) 100%);
  --gradient-ink:       linear-gradient(160deg, var(--ink-800) 0%, var(--ink-900) 100%);
  /* Iridescent / holographic - the AEO & "AI Search Leader" accolade badges */
  --gradient-holographic: linear-gradient(120deg, #cbb8f6 0%, #ffc6e2 20%, #ffe1c4 40%, #fbf3bf 56%, #c8f3da 74%, #bfe7fb 100%); /* @kind color */
  --gradient-holographic-conic: conic-gradient(from 210deg, #ffc6e2, #ffe1c4, #fbf3bf, #c8f3da, #bfe7fb, #cbb8f6, #ffc6e2); /* @kind color */
  /* Signature atmospheric glow - warm orange bleeding out of black.
     Use as a background layer under dark hero / section transitions. */
  --glow-orange:  radial-gradient(120% 80% at 50% 120%, rgba(255,166,62,0.55) 0%, rgba(255,120,40,0.18) 40%, transparent 72%); /* @kind color */
  --glow-green:   radial-gradient(120% 80% at 50% 120%, rgba(40,220,154,0.45) 0%, rgba(40,220,154,0.12) 42%, transparent 72%); /* @kind color */

  /* ============================================================
     SEMANTIC ALIASES  (light theme - default)
     Use these in components, not the raw scales above.
     ============================================================ */

  /* Surfaces */
  /* Warm-paper canvas is the brand base; white steps up as the card/pop surface. */
  --surface-page:     #f6f3ec;   /* warm paper - the default canvas */
  --surface-paper:    #f0ece1;   /* deeper warm section bg */
  --surface-card:     var(--white);   /* crisp white cards pop on the warm page */
  --surface-sunken:   #ece7db;   /* warm inset / track */
  --surface-hover:    #e7e1d3;   /* warm hover fill */
  --surface-inverse:  var(--ink-900);
  --surface-ink:      #0d0f0f;   /* full black editorial section */
  --surface-scrim:    rgba(13, 15, 15, 0.55);

  /* Text */
  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-muted:     var(--ink-500);
  --text-inverse:   var(--white);
  --text-link:      var(--green-600);

  /* Borders (subtly warm to sit on paper) */
  --border-subtle:  #ece7dc;
  --border-default: #ddd7c9;
  --border-strong:  var(--ink-900);

  /* Accent (primary pop = green) */
  --accent:          var(--fbf-green);
  --accent-hover:    var(--green-500);
  --accent-active:   var(--green-600);
  --accent-tint:     var(--green-50);
  --accent-border:   var(--green-200);
  --on-accent:       var(--ink-900);   /* dark text sits on bright green */

  /* Secondary accent (orange) */
  --accent-2:        var(--fbf-orange);
  --accent-2-tint:   var(--orange-50);
  --on-accent-2:     var(--ink-900);

  /* Tertiary accent (pink) */
  --accent-3:        var(--fbf-pink);
  --accent-3-tint:   var(--pink-50);
  --on-accent-3:     var(--white);

  /* Semantic status */
  --success:       var(--green-600);
  --success-tint:  var(--green-50);
  --warning:       var(--orange-500);
  --warning-tint:  var(--orange-50);
  --danger:        var(--red-500);
  --danger-tint:   var(--red-50);
  --info:          var(--blue-500);
  --info-tint:     var(--blue-50);

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(40, 220, 154, 0.45);
}

/* ============================================================
   DARK THEME  - near-black canvas, pops stay vivid.
   Apply with  <html data-theme="dark">  or  [data-theme="dark"]
   ============================================================ */
[data-theme="dark"] {
  --surface-page:     var(--ink-900);
  --surface-card:     var(--ink-800);
  --surface-sunken:   #0a0c0c;
  --surface-hover:    var(--ink-700);
  --surface-inverse:  var(--white);
  --surface-scrim:    rgba(0, 0, 0, 0.66);

  --text-primary:   var(--ink-50);
  --text-secondary: var(--ink-300);
  --text-muted:     var(--ink-400);
  --text-inverse:   var(--ink-900);
  --text-link:      var(--green-300);

  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong:  var(--white);

  --accent:        var(--fbf-green);
  --accent-hover:  var(--green-300);
  --accent-active: var(--green-200);
  --accent-tint:   rgba(40, 220, 154, 0.14);
  --accent-border: rgba(40, 220, 154, 0.35);
  --on-accent:     var(--ink-900);

  --accent-2-tint: rgba(255, 166, 62, 0.14);
  --accent-3-tint: rgba(255, 67, 164, 0.16);

  --success-tint:  rgba(40, 220, 154, 0.14);
  --warning-tint:  rgba(255, 166, 62, 0.14);
  --danger-tint:   rgba(255, 77, 77, 0.16);
  --info-tint:     rgba(0, 185, 215, 0.14);
}