/* ===========================================================================
   Yumee house style — tokens.  CANONICAL FILE.  Edit here, then sync.

   The 2026-09-23 edition: the look of yumee.org, carried into every app.
   Print headings in Unageo, a purple lowercase wordmark with nothing beside
   it, paper cards lifted by a lavender hairline and a soft cast shadow,
   sentence-case navigation. Framee was the pilot; its screens are the
   reference (docs/brand/references/apps/).

   The colours are the owner's (the Yutee Visual Style Sheet); everything
   else was measured on yumee.org. Every value is a plain colour or rgba(),
   never color-mix(): Captionee runs in After Effects' Chromium 88.

   Light only. There is no dark edition of the look and none is planned.
   =========================================================================== */

:root {
    color-scheme: light;

    /* ---------------------------------------------------------- the six ---- */
    --yu-ink:        #181526;   /* text, the primary button, the phone tab bar */
    --yu-purple:     #8B6FD6;   /* the one saturated colour: the wordmark, links, accents */
    --yu-lavender:   #D9C9F7;   /* soft fills: chips, the secondary button */
    --yu-mist:       #F1ECFB;   /* the lightest fill: inset panels, hover */
    --yu-paper:      #FCFAFF;   /* the page and every card */
    --yu-success:    #78B89A;   /* mint, for "ok" */

    /* --------------------------------------------------------- surfaces ---- */
    --yu-bg:            var(--yu-paper);
    --yu-surface:       var(--yu-mist);        /* inset rows, quiet panels, hover */
    --yu-surface-card:  var(--yu-paper);       /* a card is paper on paper, lifted by its shadow */
    --yu-surface-tint:  #E4DAF9;               /* a stronger lavender, for a selected row */
    --yu-surface-sunk:  var(--yu-mist);
    --yu-surface-accent:var(--yu-lav-50);      /* the tinted card: the one card on a screen that leads */

    /* --------------------------------------------------------- lavender ---- */
    --yu-lav-50:        #F6F2FD;
    --yu-lav-100:       var(--yu-mist);
    --yu-lav-150:       var(--yu-surface-tint);
    --yu-lav-200:       var(--yu-lavender);
    --yu-lav-300:       #BFA9EE;
    --yu-lav-400:       var(--yu-purple);
    --yu-lav-500:       #7A5EC7;
    --yu-lav-600:       #6A4FB4;
    --yu-lav-700:       #57408F;
    --yu-lav-800:       #3E2E68;

    --yu-primary:       var(--yu-purple);
    --yu-primary-deep:  var(--yu-lav-600);
    --yu-primary-ink:   var(--yu-lav-700);     /* purple text on paper: links, the active nav item (AA) */
    --yu-on-primary:    var(--yu-paper);
    --yu-on-lavender:   var(--yu-ink);

    /* -------------------------------------------------------------- ink ---- */
    --yu-ink-soft:      #5F5A73;   /* body copy that is not the point */
    --yu-ink-faint:     #7E7793;   /* uppercase labels, metadata */
    --yu-ink-line:      #3A354D;   /* a drawn ink outline, for the rare place that needs one */

    --yu-contrast:      var(--yu-ink);
    --yu-contrast-ink:  var(--yu-paper);
    --yu-contrast-muted:#C9C1DE;

    /* ------------------------------------------------------------ accents -- */
    --yu-pink:          #F0A9CB;
    --yu-pink-soft:     #FBDDEA;
    --yu-pink-ink:      #8E3E64;
    --yu-mint:          var(--yu-success);
    --yu-mint-soft:     #DDF0E5;
    --yu-mint-ink:      #2E6B4F;
    --yu-butter:        #F7EFC2;
    --yu-butter-ink:    #8A6D12;

    /* -------------------------------------------------------------- lines -- */
    /* The hairline is the outline of everything: cards, buttons, fields,
       dividers. 70 % lavender on paper. */
    --yu-line-card:     #E4D8F9;
    --yu-line:          var(--yu-lavender);    /* a slightly stronger rule: a field on hover, a bar track */
    --yu-line-strong:   var(--yu-ink-line);

    --yu-outline:       1px solid var(--yu-line-card);
    --yu-outline-soft:  1px solid var(--yu-line-card);
    --yu-hairline:      1px solid var(--yu-line-card);
    --yu-outline-ink:   1.5px solid var(--yu-line-strong);   /* legacy drawn outline; nothing new uses it */

    /* -------------------------------------------------------------- state -- */
    --yu-ok:            #2F8A62;
    --yu-ok-soft:       var(--yu-mint-soft);
    --yu-warn:          #A8710C;
    --yu-warn-soft:     #FBEEDA;
    --yu-danger:        #C4425F;
    --yu-danger-soft:   #FBE2E8;

    /* -------------------------------------------------------------- shape -- */
    --yu-r-xs:          6px;     /* square tags */
    --yu-r-sm:          10px;    /* fields, small controls */
    --yu-r-md:          14px;    /* nav items, inset panels */
    --yu-r-lg:          20px;    /* cards */
    --yu-r-xl:          26px;    /* the rail, the header, sheets */
    --yu-r-pill:        999px;

    /* ------------------------------------------------------------ shadow --- */
    /* Soft, low and lavender-tinted: a card lifts off the paper, it does not
       float over it. Ink at 4–6 %, the deep lavender at about 30 %. */
    --yu-shadow-card:   0 1px 2px rgba(24, 21, 38, .05), 0 12px 32px -18px rgba(62, 46, 104, .28);
    --yu-shadow-hover:  0 2px 4px rgba(24, 21, 38, .06), 0 22px 44px -20px rgba(62, 46, 104, .34);
    --yu-shadow-float:  0 1px 2px rgba(24, 21, 38, .04), 0 16px 40px -22px rgba(62, 46, 104, .30);
    --yu-shadow-purple: 0 12px 26px -12px rgba(139, 111, 214, .70);
    --yu-shadow-dock:   0 -10px 30px -22px rgba(62, 46, 104, .30);
    --yu-shadow-lift:   0 18px 40px -22px rgba(24, 21, 38, .35);
    --yu-shadow:        var(--yu-shadow-card);
    --yu-ring:          0 0 0 3px rgba(139, 111, 214, .20);   /* a focused field */

    /* ------------------------------------------------------------ spacing -- */
    --yu-gap:           16px;
    --yu-gap-lg:        24px;
    --yu-gutter:        clamp(20px, 4vw, 40px);
    --yu-page:          1200px;
    --yu-measure:       60ch;
    --yu-rail-w:        240px;   /* the rail's column, the gap around it included */
    --yu-float-gap:     12px;    /* the paper between a floating rail or header and the window edge */

    /* --------------------------------------------------------------- type -- */
    /* One family for everything a person reads: Unageo. Headings, figures,
       row titles and the wordmark are its heavier cuts, tracked tight.
       Mali is the scribble — a margin note on the marketing site, never in an
       app. `--yu-font-hand` is the old name of the heading face and stays so
       older stylesheets keep working; it is print now. */
    --yu-font:          'Unageo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --yu-font-head:     var(--yu-font);
    --yu-font-hand:     var(--yu-font-head);
    --yu-font-display:  var(--yu-font-head);
    --yu-font-logo:     var(--yu-font-head);
    --yu-font-scribble: 'Mali', 'Unageo', system-ui, sans-serif;
    --yu-font-mono:     ui-monospace, 'Cascadia Mono', 'Consolas', monospace;

    --yu-w-body:        400;
    --yu-w-ui:          500;     /* buttons, nav, labels */
    --yu-w-head:        600;     /* headings, figures, row titles */
    --yu-w-hero:        800;     /* a landing page's one big headline */
    --yu-w-logo:        800;     /* the wordmark */

    --yu-track-label:   .18em;   /* the wide-set uppercase label */
    --yu-track-caps:    .12em;   /* uppercase inside a button */
    --yu-track-head:    -.02em;  /* headings */
    --yu-track-display: -.03em;  /* the page title, figures, the wordmark */

    /* ------------------------------------------------------- dark chrome --- */
    /* Only the primary button and the phone tab bar are ink now. */
    --yu-rail:          var(--yu-ink);
    --yu-rail-ink:      var(--yu-paper);
    --yu-rail-muted:    var(--yu-contrast-muted);
    --yu-rail-hover:    #2A2540;

    /* ------------------------------------------------------------- grain --- */
    --yu-grain-opacity: .03;
    --yu-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");

    /* ------------------------------------------------------------ motion --- */
    --yu-ease:          cubic-bezier(.2, .8, .3, 1);
    --yu-fast:          140ms;
    --yu-slow:          280ms;

    /* ---------------------------------------------------------- overlays --- */
    --yu-scrim:         rgba(24, 21, 38, .5);
}