/* ============================================================
   GVP — COLOR TOKENS
   GranVia Productions. Blue → emerald brand, sampled from the logo
   (deep navy → royal blue → cyan → emerald gradient).
   + derived states and semantic aliases.
   Variable names are kept as --gvs-* for continuity across the system.
   ============================================================ */

:root {
  /* ---- Base palette (source of truth, from the logo) ---- */
  --gvs-bg:        #F5F8FC;  /* cool off-white */
  --gvs-ink:       #0B1533;  /* deep navy-black, primary ink + hard outlines */
  --gvs-ink-soft:  #47546B;  /* cool slate, secondary text */
  --gvs-accent:    #0B4DD1;  /* royal blue — primary interactive */
  --gvs-accent-2:  #00C98F;  /* emerald — the high-energy pop */
  --gvs-navy:      #061A5B;  /* deep brand navy, dark surfaces */

  /* ---- Gradient stops (logo sweep) ---- */
  --gvs-blue-deep: #032283;  /* darkest wordmark navy */
  --gvs-blue:      #0B4DD1;  /* royal */
  --gvs-blue-brt:  #0067D3;  /* bright blue */
  --gvs-cyan:      #0E9BD4;  /* mid cyan-teal */
  --gvs-teal:      #01A0B4;  /* teal (PRODUCTIONS left rule) */
  --gvs-emerald:   #00C98F;  /* emerald end-stop */

  /* Signature brand gradient (use for hero fields, bars, text-clip) */
  --gvs-gradient:      linear-gradient(100deg, #061A5B 0%, #0B4DD1 40%, #0E9BD4 70%, #00C98F 100%); /* @kind other */
  --gvs-gradient-45:   linear-gradient(45deg, #0B4DD1 0%, #0E9BD4 55%, #00C98F 100%); /* @kind other */
  --gvs-gradient-soft: linear-gradient(120deg, #E3EDFC 0%, #DDF3EC 100%); /* @kind other */

  /* ---- Neutrals (cool grey ramp) ---- */
  --gvs-white:     #FFFFFF;
  --gvs-paper-2:   #EAF0F8;  /* recessed cool paper */
  --gvs-line:      #DCE5F0;  /* hairline on paper */
  --gvs-line-2:    #C1D0E4;  /* stronger divider */
  --gvs-ink-faint: #7688A0;  /* muted / placeholder text */

  /* ---- Blue ramp (accent states) ---- */
  --gvs-accent-strong: #0A3FB0; /* hover/press, darker */
  --gvs-accent-press:  #082F86; /* active */
  --gvs-accent-tint:   #E3EDFC; /* soft fill / selected bg */
  --gvs-accent-tint-2: #C6DBF9; /* stronger soft fill */
  --gvs-accent-ink:    #0A2E7A; /* blue text on tint */

  /* ---- Emerald ramp (the pop / highlight) ---- */
  --gvs-emerald-strong:  #00B37E;  /* darker emerald, hover */
  --gvs-emerald-tint:    #D5F6EC;  /* soft emerald fill */
  --gvs-emerald-ink:  #04613F;  /* emerald text on tint */

  /* ---- Dark surface ramp (on navy) ---- */
  --gvs-navy-2:    #0B2570;  /* raised dark surface */
  --gvs-navy-line: #1E3C8A;  /* hairline on dark */

  /* ---- Semantic status (fit to the palette) ---- */
  --gvs-success:      #00A878;  /* emerald-aligned */
  --gvs-success-tint: #D5F2E8;
  --gvs-warning:      #E0A100;
  --gvs-warning-tint: #FBF0CF;
  --gvs-danger:       #E23B2E;
  --gvs-danger-tint:  #FBE2DF;
  --gvs-info:         var(--gvs-accent);
  --gvs-info-tint:    var(--gvs-accent-tint);

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */

  /* Surfaces */
  --color-bg:            var(--gvs-bg);
  --color-surface:       var(--gvs-white);
  --color-surface-sunk:  var(--gvs-paper-2);
  --color-surface-dark:  var(--gvs-navy);
  --color-surface-dark-2:var(--gvs-navy-2);
  --color-surface-invert:var(--gvs-ink);

  /* Text */
  --text-strong:    var(--gvs-ink);
  --text-body:      var(--gvs-ink-soft);
  --text-muted:     var(--gvs-ink-faint);
  --text-accent:    var(--gvs-accent);
  --text-on-accent: #FFFFFF;
  --text-on-dark:   #FFFFFF;
  --text-on-dark-soft: #AFC3E6;

  /* Lines & borders */
  --border:         var(--gvs-line);
  --border-strong:  var(--gvs-ink);   /* signature hard outline (deep navy) */
  --border-dark:    var(--gvs-navy-line);

  /* Interactive */
  --color-accent:        var(--gvs-accent);
  --color-accent-hover:  var(--gvs-accent-strong);
  --color-accent-active: var(--gvs-accent-press);
  --color-accent-tint:   var(--gvs-accent-tint);
  --color-pop:           var(--gvs-accent-2);   /* emerald highlight */
  --focus-ring:          var(--gvs-accent);
}