/* ============================================================
   COLORS — Skiforeningen
   Two levels: RAW palette/scales → SEMANTIC roles.
   Core palette (primary/secondary/tertiary + containers) is LOCKED.
   All text/background pairs documented with WCAG 2.2 contrast ratios.
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     RAW — Core brand palette (LOCKED, do not change values)
     ---------------------------------------------------------- */
  --palette-primary:                #00285E; /* dark navy   */
  --palette-primary-container:      #00153F; /* deeper navy */
  --palette-on-primary-container:   #AAD7F8; /* light blue  */

  --palette-secondary:              #ACD4F1; /* light blue  */
  --palette-secondary-container:    #E8F5FE; /* very light blue */
  --palette-on-secondary-container: #2E4363; /* slate blue  */

  --palette-tertiary:               #F15726; /* orange accent */
  --palette-tertiary-container:     #FFD1C3; /* light peach   */
  --palette-on-tertiary-container:  #701E0D; /* dark red-brown */

  /* Derived darker orange — use ONLY when orange needs a text-contrast surface */
  --palette-tertiary-strong:        #C8431A; /* white text → 4.91:1 (AA) */

  /* ----------------------------------------------------------
     RAW — Navy neutral scale (cool-tinted greys, derived)
     ---------------------------------------------------------- */
  --navy-50:   #F7FAFC;
  --navy-100:  #EEF3F8;
  --navy-150:  #E2EAF1;
  --navy-200:  #D4DFEA;
  --navy-300:  #C5D2DE;
  --navy-400:  #9DAEC0;
  --navy-500:  #6E7F94;
  --navy-600:  #4A5A70;
  --navy-700:  #2E3D52;
  --navy-800:  #1B2840;
  --navy-900:  #16243A;
  --navy-950:  #0C1626;
  --white:     #FFFFFF;

  /* ----------------------------------------------------------
     RAW — Feedback hues
     ---------------------------------------------------------- */
  --raw-error:   #B3261E;  --raw-error-container:   #F9DEDC;  --raw-on-error:   #410E0B;
  --raw-warning: #8A5300;  --raw-warning-container: #FFE7C2;  --raw-on-warning: #3E2600;
  --raw-success: #1E6E3C;  --raw-success-container: #D7F0DD;  --raw-on-success: #0A3D1E;
  --raw-info:    #0B5FA5;  --raw-info-container:    #D6E9FB;  --raw-on-info:    #06304F;

  /* ----------------------------------------------------------
     SEMANTIC — Core roles (light theme default)
     ---------------------------------------------------------- */
  --color-primary:                var(--palette-primary);
  --color-on-primary:             var(--white);             /* white on #00285E → 14.3:1 (AAA) */
  --color-primary-container:      var(--palette-primary-container);
  --color-on-primary-container:   var(--palette-on-primary-container); /* 11.7:1 (AAA) */

  --color-secondary:              var(--palette-secondary);
  --color-on-secondary:           var(--palette-on-secondary-container); /* #2E4363 on #ACD4F1 → 4.9:1 (AA) */
  --color-secondary-container:    var(--palette-secondary-container);
  --color-on-secondary-container: var(--palette-on-secondary-container); /* 9.0:1 (AAA) */

  --color-tertiary:               var(--palette-tertiary);
  --color-on-tertiary:            var(--white);             /* large/bold text & UI only → 3.4:1 */
  --color-tertiary-strong:        var(--palette-tertiary-strong);
  --color-on-tertiary-strong:     var(--white);             /* 4.9:1 (AA) */
  --color-tertiary-container:     var(--palette-tertiary-container);
  --color-on-tertiary-container:  var(--palette-on-tertiary-container); /* 8.1:1 (AAA) */

  /* ----------------------------------------------------------
     SEMANTIC — Surfaces & backgrounds
     ---------------------------------------------------------- */
  --color-background:             var(--navy-50);   /* page background */
  --color-surface:                var(--white);     /* cards, sheets */
  --color-surface-variant:        var(--navy-100);  /* subtle filled areas */
  --color-surface-raised:         var(--white);
  --color-inverse-surface:        var(--navy-900);  /* dark blocks in light theme */
  --color-on-inverse-surface:     var(--navy-50);

  /* ----------------------------------------------------------
     SEMANTIC — Outlines & dividers
     ---------------------------------------------------------- */
  --color-outline:                var(--navy-300);  /* #C5D2DE on white → 1.4:1 (decorative) */
  --color-outline-variant:        var(--navy-150);  /* hairline dividers */
  --color-outline-strong:         var(--navy-500);  /* form field borders, 3:1 (AA non-text) */

  /* ----------------------------------------------------------
     SEMANTIC — Text
     ---------------------------------------------------------- */
  --color-text:                   var(--navy-900);  /* on-surface → 15.6:1 (AAA) */
  --color-text-variant:           var(--navy-600);  /* on-surface-variant → 7.0:1 (AAA) */
  --color-text-muted:             #5E6B79;          /* captions → ~5.1:1 (AA) */
  --color-text-inverse:           var(--white);
  --color-text-link:              #0B4F92;          /* on white → ~6.3:1 (AAA) */
  --color-text-link-visited:      #5B3A8C;

  /* ----------------------------------------------------------
     SEMANTIC — Feedback roles
     ---------------------------------------------------------- */
  --color-error:                  var(--raw-error);
  --color-on-error:               var(--white);     /* 5.9:1 (AA) */
  --color-error-container:        var(--raw-error-container);
  --color-on-error-container:     var(--raw-on-error);    /* 11.8:1 (AAA) */

  --color-warning:                var(--raw-warning);
  --color-on-warning:             var(--white);     /* 5.4:1 (AA) */
  --color-warning-container:      var(--raw-warning-container);
  --color-on-warning-container:   var(--raw-on-warning);  /* 10.9:1 (AAA) */

  --color-success:                var(--raw-success);
  --color-on-success:             var(--white);     /* 5.4:1 (AA) */
  --color-success-container:      var(--raw-success-container);
  --color-on-success-container:   var(--raw-on-success);  /* 10.6:1 (AAA) */

  --color-info:                   var(--raw-info);
  --color-on-info:                var(--white);     /* 5.3:1 (AA) */
  --color-info-container:         var(--raw-info-container);
  --color-on-info-container:      var(--raw-on-info);     /* 11.1:1 (AAA) */

  /* ----------------------------------------------------------
     SEMANTIC — Interaction state overlays
     Applied as layered color-mix on the base role.
     ---------------------------------------------------------- */
  --state-hover-opacity:    0.08; /* @kind other */
  --state-pressed-opacity:  0.14; /* @kind other */
  --state-focus-opacity:    0.12; /* @kind other */
  --state-disabled-opacity: 0.38; /* @kind other */

  /* Primary button states */
  --color-primary-hover:    #013372;  /* lightened navy */
  --color-primary-pressed:  #001B49;
  /* Secondary (tonal) states */
  --color-secondary-hover:    #9CC8EC;
  --color-secondary-pressed:  #8BBCE6;
  /* Tertiary states */
  --color-tertiary-hover:    #D8491E;
  --color-tertiary-pressed:  #B83C16;

  /* Focus ring */
  --color-focus-ring:       #1E6CC4;  /* high-contrast focus halo */

  /* Scrim / overlays */
  --color-scrim:            rgba(12, 22, 38, 0.56);
  --color-overlay-soft:     rgba(12, 22, 38, 0.04);

  /* ----------------------------------------------------------
     SEMANTIC — Season accent (default = neutral; overridden in seasons.css)
     ---------------------------------------------------------- */
  --season-accent:          var(--color-primary);
  --season-accent-soft:     var(--color-secondary-container);
  --season-on-accent:       var(--color-on-primary);
  --season-hero-tint:       var(--palette-primary-container);
}