/* house-style: token bridge */

/* Studee's names, mapped once onto the house tokens in ../design/: print
   headings in Unageo, lavender hairlines and soft shadows, a light floating
   rail, no doodles. Nothing below this file states a colour, a font or a
   radius. Light only. */

@import '../design/yumee.css';

:root {
    /* ---------------------------------------------------------- surfaces -- */
    --bg:         var(--yu-bg);
    --surface:    var(--yu-surface);         /* mist: hover rows, insets */
    --card:       var(--yu-surface-card);
    --tint:       var(--yu-surface-tint);    /* a selected or current row */
    --lav-50:     var(--yu-lav-50);          /* the palest lavender: hover, the active nav item */
    --accent-card: var(--yu-surface-accent); /* the one card on a screen that leads */

    /* ---------------------------------------------------------- lavender -- */
    --primary:      var(--yu-lav-300);       /* a filled bar, a chosen chart column */
    --primary-soft: var(--yu-lavender);
    --lav-300:      var(--yu-lav-300);
    --violet:       var(--yu-purple);        /* links, accents */
    --purple-ink:   var(--yu-primary-ink);   /* purple text on paper (AA) */
    --on-primary:   var(--yu-ink);

    /* --------------------------------------------------------------- ink -- */
    --ink:   var(--yu-ink);
    --muted: var(--yu-ink-soft);
    --faint: var(--yu-ink-faint);

    --contrast:    var(--yu-contrast);
    --on-contrast: var(--yu-contrast-ink);
    --contrast-muted: var(--yu-rail-muted);
    --contrast-hover: var(--yu-rail-hover);

    /* --------------------------------------------------------- accents ---- */
    --pink:      var(--yu-pink);
    --pink-soft: var(--yu-pink-soft);
    --pink-ink:  var(--yu-pink-ink);
    --mint:      var(--yu-mint);
    --mint-soft: var(--yu-mint-soft);
    --mint-ink:  var(--yu-mint-ink);

    /* -------------------------------------------------------------- state -- */
    --danger:      var(--yu-danger);
    --danger-soft: var(--yu-danger-soft);
    --warn:        var(--yu-warn);
    --warn-soft:   var(--yu-warn-soft);
    --ok:          var(--yu-ok);
    --ok-soft:     var(--yu-ok-soft);

    /* Substitutions and homework share the house amber: something changed. */
    --subst:      var(--yu-warn);
    --subst-soft: var(--yu-warn-soft);
    --subst-ink:  var(--yu-warn);

    /* Calendar events wear the deep violet against messages' light lavender. */
    --sky:      var(--yu-primary-deep);
    --sky-soft: var(--yu-lavender);
    --sky-ink:  var(--yu-lav-800);

    /* --------------------------------------------------------------- line -- */
    /* The hairline is the outline of everything: cards, controls, dividers. */
    --line:         var(--yu-line);
    --line-card:    var(--yu-line-card);
    --line-quiet:   var(--yu-ink-faint);     /* the "other" category's dot */
    --outline-soft: var(--yu-outline-soft);
    --outline:      var(--yu-outline);
    --hairline:     var(--yu-hairline);

    /* -------------------------------------------------------------- shape -- */
    --r-xs:   var(--yu-r-xs);
    --r-sm:   var(--yu-r-sm);
    --r-md:   var(--yu-r-md);
    --r-lg:   var(--yu-r-lg);
    --r-xl:   var(--yu-r-xl);
    --r-pill: var(--yu-r-pill);

    --shadow:       var(--yu-shadow-card);
    --shadow-card:  var(--yu-shadow-card);
    --shadow-hover: var(--yu-shadow-hover);
    --shadow-float: var(--yu-shadow-float);
    --shadow-lift:  var(--yu-shadow-lift);
    --ring:         var(--yu-ring);

    /* --------------------------------------------------------------- type -- */
    /* One family. Headings, figures and row titles are its SemiBold, tracked
       tight; there is no handwriting in the app. */
    --font:  var(--yu-font);
    --head:  var(--yu-font-head);
    --w-ui:  var(--yu-w-ui);
    --w-head: var(--yu-w-head);
    --track: var(--yu-track-label);
    --track-head: var(--yu-track-head);
    --track-display: var(--yu-track-display);

    /* -------------------------------------------------------------- motion -- */
    --ease: var(--yu-ease);
    --fast: var(--yu-fast);
    --slow: var(--yu-slow);

    --scrim: var(--yu-scrim);

    /* ------------------------------------------------------------- layout -- */
    --rail-w:   var(--yu-rail-w);
    --rail-gap: var(--yu-float-gap);
    --gutter:   clamp(16px, 3vw, 36px);
    --tabbar-space: 0px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
}