/*
 * HKS colour tokens.
 *
 * Three layers, in order:
 *
 *   1. BRAND    - the two colours taken from the official mark
 *                 (assets/img/HKS.svg: #003399 blue, #FF0000 red).
 *   2. RAMPS    - tints and shades derived from those, plus a neutral ramp and
 *                 the status colours. Raw values; no opinion about usage.
 *   3. SEMANTIC - what a colour is FOR. Everything in the app stylesheets
 *                 should reference this layer, never a ramp step and never a
 *                 literal, so the palette can be re-pointed in one place.
 *
 * CSS custom properties rather than Sass because this project has no build
 * step (see CLAUDE.md) - a preprocessor would mean adding tooling to deploy a
 * stylesheet. Custom properties also let the palette be overridden per
 * template or at runtime, which a compiled variable cannot.
 *
 * Loaded by default.php, default_new.php and external.php. It must come before
 * the stylesheets that consume it.
 */

:root {

    /* == 1. BRAND ======================================================== */

    --hks-blue: #003399;   /* HKS.svg */
    --hks-red:  #FF0000;   /* HKS.svg */

    /* == 2. RAMPS ======================================================== */

    /* Blue: brand at -70, tinted toward white below it, shaded above.
       Contrast of white text on each step is noted so choices are checkable. */
    --blue-05: #F2F5FA;
    --blue-10: #E0E7F3;
    --blue-20: #B2C2E0;
    --blue-40: #6685C2;   /* white on: 3.68 - large text / UI only */
    --blue-60: #2E58AB;   /* white on: 6.77 */
    --blue-70: #003399;   /* white on: 10.86 - the brand blue */
    --blue-80: #002877;   /* white on: 13.38 */
    --blue-90: #001E59;   /* white on: 15.79 */

    /* Red: pure brand red only manages 4.00 against white, which is below the
       4.5 AA needs for body text, so -60 carries any red that sits under
       white text and pure red is kept for the mark and thin accents. */
    --red-10: #FFE6E6;
    --red-30: #FF8C8C;   /* on brand blue: 4.85 - the on-dark red */
    --red-50: #FF0000;   /* white on: 4.00 - decorative only */
    --red-60: #E00000;   /* white on: 5.04 */
    --red-70: #BF0000;   /* white on: 6.53 */

    /* Neutrals */
    --gray-00:  #FFFFFF;
    --gray-05:  #F7F8FA;
    --gray-10:  #F1F1F1;
    --gray-20:  #E3E5E9;
    --gray-30:  #DCDFE4;
    --gray-40:  #C3CAD4;
    --gray-50:  #67737F;   /* darkened from #97A1AB, which was 2.62 on white. Now
                              4.84 on card / 4.56 on the page bg, so the small
                              uppercase labels using it meet AA on both. */
    --gray-60:  #6B7280;
    --gray-70:  #585858;
    --gray-80:  #333333;
    --gray-90:  #1F2429;
    --gray-100: #000000;

    /* Status. Deliberately not derived from the brand: they have to stay
       distinguishable from it, and red-as-danger must not be confused with
       red-as-brand. */
    --status-success:     #2E7D32;
    --status-success-bg:  #EAF3EA;
    --status-warning:     #EF6C00;
    --status-warning-bg:  #FFF6EA;
    --status-warning-txt: #6A4A00;
    --status-danger:      #C62828;
    --status-danger-bg:   #FDEEEE;
    --status-danger-txt:  #B71C1C;
    --status-info:        #1565C0;
    --status-neutral:     #757575;
    --status-none:        #9E9E9E;
    --status-3x3:         #6A1B9A;

    /* == 3. SEMANTIC ===================================================== */

    /* Chrome */
    --nav-bg:            var(--gray-00);
    --nav-bg-hover:      var(--blue-80);
    --nav-text:          var(--black);
    --nav-shadow:        rgba(0, 0, 0, 0.35);
    --nav-accent:        var(--hks-red);   /* the thin rule under the navbar */
    /* Brand red on the navbar only manages 2.16 against #003399, so anything
       red that sits ON the nav uses the tinted step instead (4.85). */
    --nav-link-accent:   var(--red-30);

    --sidebar-bg:        var(--blue-90);
    --sidebar-text:      var(--gray-00);
    --sidebar-hover-bg:  var(--blue-80);
    --sidebar-active-bg: var(--blue-60);

    /* Actions */
    --primary:           var(--blue-70);
    --primary-hover:     var(--blue-80);
    --on-primary:        var(--gray-00);
    --primary-soft:      var(--blue-10);
    --primary-soft-hover: var(--blue-20);

    --accent:            var(--red-60);
    --accent-hover:      var(--red-70);
    --on-accent:         var(--gray-00);

    --link:              var(--blue-70);
    --link-hover:        var(--blue-90);

    /* Surfaces */
    --surface-page:      var(--gray-05);
    --surface-card:      var(--gray-00);
    --surface-sunken:    var(--gray-10);
    --surface-hover:     var(--blue-05);
    --surface-header:    var(--gray-10);

    /* Text */
    --text-strong:       var(--gray-90);
    --text:              var(--gray-80);
    --text-soft:         var(--gray-70);
    --text-muted:        var(--gray-60);
    --text-faint:        var(--gray-50);
    --text-inverse:      var(--gray-00);

    /* Lines */
    --border:            var(--gray-30);
    --border-soft:       var(--gray-20);
    --border-strong:     var(--gray-40);
    --divider:           var(--gray-20);

    /* Effects */
    --shadow-color:      rgba(0, 0, 0, 0.18);
    --overlay:           rgba(0, 0, 0, 0.5);
    --focus-ring:        var(--blue-40);

    /* Feedback flashes and translucent overlays that specific widgets use. */
    --flash-success:     #51FFA8;
    --flash-success-bg:  #DDFFDD;
    --scrim-light:       rgba(255, 255, 255, 0.5);
    --scrim-dark:        rgba(0, 0, 0, 0.4);
    --inset-shadow:      rgba(0, 0, 0, 0.125);
    --soft-shadow:       rgba(213, 217, 217, 0.5);
    --danger-scrim:      rgba(255, 63, 63, 0.372);
    --danger-scrim-2:    rgba(168, 41, 41, 0.557);
    --doc-border:        var(--primary);

    /* Tabs (club portal) */
    --tab-bg:            var(--gray-05);
    --tab-hover-bg:      var(--blue-05);
    --tab-active-bg:     var(--gray-00);
    --tab-active-text:   var(--blue-70);
    --tab-active-rule:   var(--hks-red);
    --tab-border:        rgba(59, 59, 59, 0.685);

    /* == LEGACY ALIASES =================================================
     * Names that existing rules already reference. Kept so nothing breaks,
     * re-pointed at the ramp above. Prefer the semantic layer in new code. */

    --base-blue:              var(--blue-70);
    --base-blue-1:            var(--blue-20);
    --base-blue-2:            var(--blue-40);
    --base-blue-3:            var(--blue-80);
    --base-blue-4:            var(--blue-90);
    --base-red:               var(--red-60);
    --gray-txt-color:         var(--text-soft);
    --btn-light-blue:         var(--blue-10);
    --btn-light-blue-hover:   var(--blue-20);
    --black:                  var(--gray-100);
    --base-color:             var(--text);
    --blue-10-legacy:         var(--blue-10);
    --blue-20-legacy:         var(--blue-20);
    --blue-30:                var(--blue-40);
    --page-bg-gray:           var(--surface-page);

    /* Club-portal names introduced with hks-external.css. */
    --ext-border:             var(--border);
    --ext-muted:              var(--text-muted);
    --ext-bg:                 var(--surface-page);
    --ext-blue:               var(--primary);
}

/* Utility classes that predate the tokens. */
.color-primary-0 { color: var(--blue-70); }
.color-primary-1 { color: var(--blue-20); }
.color-primary-2 { color: var(--blue-40); }
.color-primary-3 { color: var(--blue-80); }
.color-primary-4 { color: var(--blue-90); }