@charset "utf-8";
/*
Theme Name:NaruniwaSoroban
Template:NaruniwaSchool
Theme URI:https://naruniwa.org/
Description:NaruniwaSoroban from SPEC
Version:1.0
Author:SPEC, Inc.
Author URI:https://specgroup.jp/
*/

:root {
    /* --- BASE THEME --- */
    --hue-theme: 0;
    --sat-theme: 100%;
    --lum-theme: 75%;
    --alpha: 1;

    /* --- Neutral --- */
    --sat-neutral: 0%;
    --lum-white: 100%;
    --lum-black: 20%;

    /* --- Form Colors --- */
    --hue-form: 275;
    --sat-form: 90%;
    --lum-form: 39%;

    /* --- Point Colors --- */
    --hue-point: 0;
    --sat-point: 80%;
    --lum-point: 47%;

    /* --- Additional Colors --- */
    --hue-water: 196;
    --sat-water: 90%;
    --lum-water: 49%;

    --hue-green: 101;
    --sat-green: 52%;
    --lum-green: 49%;

    --hue-light: 50;
    --sat-light: 63%;
    --lum-light: 59%;

    /* --- Base Colors --- */
    --color-theme: hsla(var(--hue-theme), var(--sat-theme), var(--lum-theme), var(--alpha));
    --color-white: hsla(var(--hue-theme), var(--sat-neutral), var(--lum-white), var(--alpha));
    --color-black: hsla(var(--hue-theme), var(--sat-neutral), var(--lum-black), var(--alpha));
    --color-form: hsla(var(--hue-form), var(--sat-form), var(--lum-form), var(--alpha));
    --color-point: hsla(var(--hue-point), var(--sat-point), var(--lum-point), var(--alpha));
    --color-water: hsla(var(--hue-water), var(--sat-water), var(--lum-water), var(--alpha));
    --color-green: hsla(var(--hue-green), var(--sat-green), var(--lum-green), var(--alpha));
    --color-light: hsla(var(--hue-light), var(--sat-light), var(--lum-light), var(--alpha));

    /* --- Transparent Variants --- */
    --alpha-trp: 0.2;
    --alpha-mtrp: 0.9;

    --color-theme-trp: hsla(var(--hue-theme), var(--sat-theme), var(--lum-theme), calc(var(--alpha) - var(--alpha-trp)));
    --color-theme-mtrp: hsla(var(--hue-theme), var(--sat-theme), var(--lum-theme), calc(var(--alpha) - var(--alpha-mtrp)));

    --color-white-trp: hsla(var(--hue-theme), var(--sat-neutral), var(--lum-white), calc(var(--alpha) - var(--alpha-trp)));
    --color-white-mtrp: hsla(var(--hue-theme), var(--sat-neutral), var(--lum-white), calc(var(--alpha) - var(--alpha-mtrp)));

    --color-black-trp: hsla(var(--hue-theme), var(--sat-neutral), var(--lum-black), calc(var(--alpha) - var(--alpha-trp)));
    --color-black-mtrp: hsla(var(--hue-theme), var(--sat-neutral), var(--lum-black), calc(var(--alpha) - var(--alpha-mtrp)));

    --color-form-trp: hsla(var(--hue-form), var(--sat-form), var(--lum-form), calc(var(--alpha) - var(--alpha-trp)));
    --color-form-mtrp: hsla(var(--hue-form), var(--sat-form), var(--lum-form), calc(var(--alpha) - var(--alpha-mtrp)));

    --color-point-trp: hsla(var(--hue-point), var(--sat-point), var(--lum-point), calc(var(--alpha) - var(--alpha-trp)));
    --color-point-mtrp: hsla(var(--hue-point), var(--sat-point), var(--lum-point), calc(var(--alpha) - var(--alpha-mtrp)));

    --color-water-trp: hsla(var(--hue-water), var(--sat-water), var(--lum-water), calc(var(--alpha) - var(--alpha-trp)));
    --color-water-mtrp: hsla(var(--hue-water), var(--sat-water), var(--lum-water), calc(var(--alpha) - var(--alpha-mtrp)));

    --color-green-trp: hsla(var(--hue-green), var(--sat-green), var(--lum-green), calc(var(--alpha) - var(--alpha-trp)));
    --color-green-mtrp: hsla(var(--hue-green), var(--sat-green), var(--lum-green), calc(var(--alpha) - var(--alpha-mtrp)));

    --color-light-trp: hsla(var(--hue-light), var(--sat-light), var(--lum-light), calc(var(--alpha) - var(--alpha-trp)));
    --color-light-mtrp: hsla(var(--hue-light), var(--sat-light), var(--lum-light), calc(var(--alpha) - var(--alpha-mtrp)));
    
    /* --- Shadows --- */
    --shadow-light: 0 2px 4px hsla(var(--hue-theme), var(--sat-neutral), var(--lum-black), 0.08);
    --shadow-medium: 0 4px 6px hsla(var(--hue-theme), var(--sat-neutral), var(--lum-black), 0.12);
    --shadow-heavy: 0 6px 10px hsla(var(--hue-theme), var(--sat-neutral), var(--lum-black), 0.16);

    /* --- Cards --- */
    --card-bg: var(--color-white);
    --card-padding: .75rem;
    --card-margin: .5rem .5rem 1rem 0;
    --card-radius: var(--radius-img);
    --card-shadow: 0 .25rem .25rem var(--color-black-mtrp);
    --card-shadow-theme: 0 .25rem .25rem var(--color-theme-mtrp);
    --card-shadow-white: 0 .25rem .25rem var(--color-white-mtrp);
    --card-shadow-black: 0 .25rem .25rem var(--color-black-mtrp);
    --card-shadow-form: 0 .25rem .25rem var(--color-form-mtrp);
    --card-shadow-point: 0 .25rem .25rem var(--color-point-mtrp);
    --card-shadow-water: 0 .25rem .25rem var(--color-water-mtrp);
    --card-shadow-green: 0 .25rem .25rem var(--color-green-mtrp);
    --card-shadow-light: 0 .25rem .25rem var(--color-light-mtrp);

    /* --- Forms --- */
    --form-padding: .75rem 1rem;
    --form-font-size: 1rem;
    --form-border-radius: .5rem;
    --form-border-width: 2px;
    --form-box-shadow: 0 4px 6px var(--color-form-trp);
    --form-box-shadow-hover: 0 6px 10px var(--color-form-mtrp);
    --form-transition: 0.3s;
    --form-focus-shadow: 0 0 0 4px var(--color-form-mtrp);
    --form-disabled-opacity: 0.6;
    --input-background: hsla(var(--hue-form), var(--sat-form), calc(var(--lum-form)+20%), var(--alpha-trp));
    
    /* --- Misc --- */
    --logo-width:13rem;
}
@media (min-width:768px){
   :root{
        --logo-width:16rem;
    }
}
@media (min-width:1279px) {
    :root {
        --logo-width:18rem;
    }
}
@media (min-width:1920px) {
    :root {
        --logo-width:15rem;
    }
}