/* ─────────────────────────────────────────
   DESIGN TOKENS
   app/assets/stylesheets/base/tokens.css
───────────────────────────────────────── */

:root {
    /* ── Raw color palette ── */

    --text-light:         white;
    --text-dark:          #1c1a1e;

    --blue-light:         #1a73e8;
    --blue-dark:          #8ab4f8;

    --fade-blue-light:    #ebf2ff;
    --fade-blue-dark:     #2a3851;

    --red-light:          #e84545;
    --red-dark:           #fd7373;

    --fade-red-light:     #ffe0e0;
    --fade-red-dark:      #5c2828;

    --green-light:        #1f883d;
    --green-dark:         #7ee787;

    --fade-green-light:   #dcfbe4;
    --fade-green-dark:    #2a5133;

    --purple-light:       #6f5bd6;
    --purple-dark:        #c4baff;

    --fade-purple-light:  #efedff;
    --fade-purple-dark:   #2f2a51;

    --yellow-light:       #cbfb25;
    --yellow-dark:        #e5ff8a;

    --fade-yellow-light:  #f7ffe1;
    --fade-yellow-dark:   #3a4a0a;

    --gray-fade-light:    rgba(60,  60,  60,  0.08);
    --gray-fade-dark:     rgba(200, 200, 200, 0.12);

    --background-light:              #f5f5fb;
    --background-dark:               #191919;
    --background-secondary-light:    #f5f8ff;
    --background-secondary-dark:     #2d2f31;
    --background-tertiary-light:     #f7f9fd;
    --background-tertiary-dark:      #28292a;
    --background-quaternary-light:   #ffffff;
    --background-quaternary-dark:    #212121;
    --background-quinary-light:      #cbf0f8;
    --background-quinary-dark:       #436971;
    --background-senary-light:       #cbf0f8;
    --background-senary-dark:        #436971;

    /* ── Misc ── */
    --header-h: 4.375rem;
}


/* ─────────────────────────────────────────
   LIGHT THEME
   data-theme="light" — explicit preference
   data-theme="system" — OS default light
───────────────────────────────────────── */

body[data-theme="light"],
body[data-theme="system"] {
    --current-text-color:            var(--text-dark);
    --current-text-color-inverse:    var(--text-light);

    --current-blue-color:            var(--blue-light);
    --current-blue-color-inverse:    var(--blue-dark);
    --current-fade-blue-color:       var(--fade-blue-light);

    --current-red-color:             var(--red-light);
    --current-red-color-inverse:    var(--red-dark);
    --current-fade-red-color:        var(--fade-red-light);

    --current-green-color:           var(--green-light);
    --current-fade-green-color:      var(--fade-green-light);

    --current-purple-color:          var(--purple-light);
    --current-fade-purple-color:     var(--fade-purple-light);

    --current-yellow-color:          var(--yellow-light);
    --current-fade-yellow-color:     var(--fade-yellow-light);

    --current-fade-gray-color:       var(--gray-fade-light);

    --current-background:            var(--background-light);
    --current-secondary-background:  var(--background-secondary-light);
    --current-tertiary-background:   var(--background-tertiary-light);
    --current-quaternary-background: var(--background-quaternary-light);
    --current-quinary-background:    var(--background-quinary-light);
    --current-senary-background:     var(--background-senary-light);
}


/* ─────────────────────────────────────────
   DARK THEME
   data-theme="dark" — explicit preference
───────────────────────────────────────── */

body[data-theme="dark"] {
    --current-text-color:            var(--text-light);
    --current-text-color-inverse:    var(--text-dark);

    --current-blue-color:            var(--blue-dark);
    --current-blue-color-inverse:    var(--blue-light);
    --current-fade-blue-color:       var(--fade-blue-dark);

    --current-red-color:             var(--red-dark);
    --current-red-color-inverse:    var(--red-light);
    --current-fade-red-color:        var(--fade-red-dark);

    --current-green-color:           var(--green-dark);
    --current-fade-green-color:      var(--fade-green-dark);

    --current-purple-color:          var(--purple-dark);
    --current-fade-purple-color:     var(--fade-purple-dark);

    --current-yellow-color:          var(--yellow-dark);
    --current-fade-yellow-color:     var(--fade-yellow-dark);

    --current-fade-gray-color:       var(--gray-fade-dark);

    --current-background:            var(--background-dark);
    --current-secondary-background:  var(--background-secondary-dark);
    --current-tertiary-background:   var(--background-tertiary-dark);
    --current-quaternary-background: var(--background-quaternary-dark);
    --current-quinary-background:    var(--background-quinary-dark);
    --current-senary-background:     var(--background-senary-dark);
}


/* ─────────────────────────────────────────
   DARK THEME
   data-theme="system" — OS prefers dark
   Overrides the light defaults above
───────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
    body[data-theme="system"] {
        --current-text-color:            var(--text-light);
        --current-text-color-inverse:    var(--text-dark);

        --current-blue-color:            var(--blue-dark);
        --current-blue-color-inverse:    var(--blue-light);
        --current-fade-blue-color:       var(--fade-blue-dark);

        --current-red-color:             var(--red-dark);
        --current-red-color-inverse:    var(--red-light);
        --current-fade-red-color:        var(--fade-red-dark);

        --current-green-color:           var(--green-dark);
        --current-fade-green-color:      var(--fade-green-dark);

        --current-purple-color:          var(--purple-dark);
        --current-fade-purple-color:     var(--fade-purple-dark);

        --current-yellow-color:          var(--yellow-dark);
        --current-fade-yellow-color:     var(--fade-yellow-dark);

        --current-fade-gray-color:       var(--gray-fade-dark);

        --current-background:            var(--background-dark);
        --current-secondary-background:  var(--background-secondary-dark);
        --current-tertiary-background:   var(--background-tertiary-dark);
        --current-quaternary-background: var(--background-quaternary-dark);
        --current-quinary-background:    var(--background-quinary-dark);
        --current-senary-background:     var(--background-senary-dark);
    }
}