/* Copied from Naldano/brand@c0e1598 (tokens.css). Naldano brand tokens. The only place these values live: copy this file and fonts/ into a
   project instead of retyping values. Source: github.com/Naldano/brand */

@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/cormorant-garamond-400.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/cormorant-garamond-400-italic.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/cormorant-garamond-500.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/dm-sans-400.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/dm-sans-500.woff2") format("woff2")}

:root{
  /* Ground and text */
  --paper:#EEECE5;        /* page background */
  --page:#F7F0DF;         /* cards, slide surfaces */
  --parchment:#EDE4D0;    /* second surface, quotes */
  --line:#D5C9AC;         /* borders, dividers */
  --hair:rgba(58,75,49,.19);
  --ink:#273E34;          /* forest ink: text, wordmark */
  --ink-soft:#3E5946;     /* lead paragraphs */
  --moss:#5C6A5A;         /* secondary text, labels; darkened from #6B7967 to pass WCAG AA */
  --sage:#778D65;         /* only the wordmark dot and small marks, never text */
  --sage-light:#B5C6A3;   /* the dot on dark green */
  --cream:#F4F1E7;        /* text on dark surfaces */

  /* Learning Garden */
  --garden-wall:#4E7358;  /* large surfaces, chapter dividers */
  --garden-ink:#304F40;   /* text in the learning area, dark slides */
  --garden-grey:#637366;  /* secondary text in the learning area, 18px and up */

  /* Process Atelier */
  --atelier-wall:#BE9B80; /* large surfaces, never behind text */
  --plaster:#E6D3BE;      /* light surface, highlights */
  --atelier-ink:#754832;  /* text in the process area, margin notes */
  --clay:#826753;         /* secondary text in the process area, 18px and up */
  --brass:#AE8853;        /* sparingly: one number, one detail, never body text */

  /* Type */
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"DM Sans",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace; /* code and data only, no font file */
  --text-title:clamp(56px,7vw,88px);    /* serif 400, tracking -0.03em */
  --text-chapter:clamp(32px,4.4vw,52px);/* serif 400/500, tracking -0.02em */
  --text-entry:24px;                    /* serif 500: card heads, entries */
  --text-note:20px;                     /* serif italic: margin notes, footers */
  --text-body:17px;                     /* sans 400, line-height 1.6 */
  --text-small:15px;
  --text-label:13px;                    /* sans 500, uppercase, tracking 0.2em */

  /* Space and shape */
  --space-xs:8px;
  --space-s:16px;
  --space-m:24px;
  --space-l:32px;
  --space-xl:56px;
  --gutter:clamp(16px,4vw,40px);
  --max-width:1180px;                   /* single-column layouts below 760px */
  --radius:2px;                         /* panels, cards, images */
  --radius-pill:999px;                  /* buttons, notes */
}

/* Glass: the screen layer for the workbench and the customer sign-in. glass.css applies these
   tokens, glass.html shows every building block and glass/check.mjs holds them to their budgets.
   Every colour is mixed from the brand colours above. light-dark() follows color-scheme, which
   glass.css sets; the dark theme is a proposal for the open point "dark variant".
   Frame, panel and dialog are blurred and content can pass under them, so their tint keeps text
   at 4.5:1 over every brand colour. Cards only ever sit over the scene. The thin surfaces (frame,
   panel, cards) carry all text in --glass-text; secondary text needs a dialog or a sheet. */
:root{
  --night:color-mix(in oklab,var(--ink),black 36%);   /* dark ground */
  --dusk:color-mix(in oklab,var(--ink),black 16%);    /* dark solid surface */

  /* Room: accent and the scene behind the glass. Atelier by default, garden in [data-room="garden"]. */
  --glass-accent:light-dark(var(--atelier-ink),var(--plaster));        /* primary fills, focus, selection */
  --glass-on-accent:light-dark(var(--cream),var(--atelier-ink));       /* text on --glass-accent */
  --glass-wall:light-dark(color-mix(in oklab,var(--atelier-wall) 80%,var(--atelier-ink)),color-mix(in oklab,var(--atelier-ink) 58%,var(--night)));
  --glass-wall-lit:light-dark(color-mix(in oklab,var(--atelier-wall) 78%,var(--plaster)),color-mix(in oklab,var(--atelier-ink) 78%,var(--night)));
  --glass-wall-shade:light-dark(color-mix(in oklab,var(--atelier-wall) 52%,var(--atelier-ink)),var(--night));
  --glass-sky:light-dark(var(--page),color-mix(in oklab,var(--garden-ink) 64%,var(--night)));
  --glass-haze:light-dark(var(--plaster),color-mix(in oklab,var(--garden-ink) 82%,var(--brass)));
  --glass-hill:light-dark(var(--sage-light),color-mix(in oklab,var(--garden-wall) 52%,var(--night)));
  --glass-lake:light-dark(var(--sage),color-mix(in oklab,var(--garden-ink) 70%,var(--night)));
  --glass-sun:light-dark(var(--cream),var(--brass));

  /* Surfaces */
  --glass-frame:light-dark(color-mix(in srgb,var(--page) 66%,transparent),color-mix(in srgb,var(--night) 74%,transparent));
  --glass-panel:light-dark(color-mix(in srgb,var(--page) 68%,transparent),color-mix(in srgb,var(--night) 76%,transparent));
  --glass-dialog:light-dark(color-mix(in srgb,var(--page) 88%,transparent),color-mix(in srgb,var(--night) 88%,transparent));
  --glass-card:light-dark(color-mix(in srgb,var(--page) 50%,transparent),color-mix(in srgb,var(--night) 54%,transparent));
  --glass-control:light-dark(color-mix(in srgb,var(--cream) 62%,transparent),color-mix(in srgb,var(--cream) 7%,transparent)); /* buttons and tracks on glass */
  --glass-well:light-dark(color-mix(in srgb,var(--ink) 9%,transparent),color-mix(in srgb,black 26%,transparent));  /* recessed track of a segmented control */
  --glass-lens:light-dark(var(--cream),color-mix(in srgb,var(--dusk) 86%,var(--cream)));           /* the selected item of a segmented control */
  --glass-field:light-dark(var(--page),var(--night));                                              /* inputs */
  --glass-sheet:light-dark(var(--page),var(--dusk));                                               /* solid content: tables, lists */
  --glass-row-hover:color-mix(in srgb,var(--glass-accent) 7%,transparent);
  --glass-row-current:color-mix(in srgb,var(--glass-accent) 14%,transparent);
  --glass-scrim:light-dark(color-mix(in srgb,var(--ink) 38%,transparent),color-mix(in srgb,black 58%,transparent));
  --glass-solid:light-dark(var(--page),var(--dusk));                                               /* opaque fallback of every glass surface */
  --glass-solid-2:light-dark(var(--parchment),color-mix(in oklab,var(--dusk),var(--cream) 9%));

  /* Text and lines */
  --glass-text:light-dark(var(--ink),var(--cream));
  --glass-text-2:light-dark(var(--ink-soft),color-mix(in srgb,var(--cream) 80%,var(--night)));
  --glass-hint:var(--glass-text-2);    /* placeholders and field hints: resolved here, so thin glass keeps it */
  --glass-text-accent:light-dark(var(--atelier-ink),var(--plaster));
  --glass-line:light-dark(var(--hair),color-mix(in srgb,var(--cream) 14%,transparent));
  --glass-control-line:light-dark(var(--ink-soft),color-mix(in srgb,var(--cream) 78%,var(--night)));  /* field borders: 3:1 on any glass */
  --glass-focus:var(--glass-accent);

  /* Light: rim, specular edge, sheen and the pointer glow */
  --glass-rim:light-dark(color-mix(in srgb,white 78%,transparent),color-mix(in srgb,var(--cream) 24%,transparent));
  --glass-rim-low:light-dark(color-mix(in srgb,white 30%,transparent),color-mix(in srgb,var(--cream) 7%,transparent));
  --glass-glow:light-dark(color-mix(in srgb,white 70%,transparent),color-mix(in srgb,var(--plaster) 9%,transparent));
  --glass-sheen:linear-gradient(172deg,light-dark(color-mix(in srgb,white 46%,transparent),color-mix(in srgb,var(--cream) 5%,transparent)),transparent 42%);
  --glass-edge:inset 1px 1px 0 var(--glass-rim),inset -1px -1px 0 var(--glass-rim-low),inset 0 0 0 1px var(--glass-rim-low);
  --glass-edge-s:inset 0 1px 0 var(--glass-rim),inset 0 0 0 1px var(--glass-rim-low);

  /* Depth */
  --glass-shadow-s:0 1px 2px light-dark(color-mix(in srgb,var(--ink) 14%,transparent),color-mix(in srgb,black 45%,transparent));
  --glass-shadow-m:0 0 0 .5px light-dark(color-mix(in srgb,var(--ink) 14%,transparent),color-mix(in srgb,black 50%,transparent)),0 1px 2px light-dark(color-mix(in srgb,var(--ink) 10%,transparent),color-mix(in srgb,black 40%,transparent)),0 14px 36px -14px light-dark(color-mix(in srgb,var(--atelier-ink) 38%,transparent),color-mix(in srgb,black 70%,transparent));
  --glass-shadow-l:0 0 0 .5px light-dark(color-mix(in srgb,var(--ink) 14%,transparent),color-mix(in srgb,black 50%,transparent)),0 2px 6px light-dark(color-mix(in srgb,var(--ink) 10%,transparent),color-mix(in srgb,black 40%,transparent)),0 40px 90px -30px light-dark(color-mix(in srgb,var(--ink) 45%,transparent),color-mix(in srgb,black 80%,transparent));

  /* Blur: only the frame, the side panel and dialogs, at most three layers on screen, never on lists */
  --glass-blur-s:10px;
  --glass-blur-m:22px;
  --glass-blur-l:36px;
  --glass-saturate:165%;
  --glass-filter-frame:blur(var(--glass-blur-m)) saturate(var(--glass-saturate));
  --glass-filter-panel:blur(var(--glass-blur-l)) saturate(var(--glass-saturate));
  --glass-filter-dialog:blur(var(--glass-blur-l)) saturate(var(--glass-saturate));

  /* Shape: rounded glass, no pill shapes; the round button stays a circle */
  --glass-radius-s:10px;   /* controls */
  --glass-radius-m:16px;   /* plates, previews */
  --glass-radius-l:24px;   /* frame, panel, dialog, cards */
  --glass-radius-arch:220px; /* top of the sign-in arch: half its widest width */

  /* Motion: liquid overshoot for the lens and panels, removed by prefers-reduced-motion */
  --glass-ease:cubic-bezier(.2,.8,.2,1);
  --glass-ease-liquid:cubic-bezier(.34,1.45,.5,1);
  --glass-fast:120ms;
  --glass-base:220ms;
  --glass-slow:460ms;
}
[data-room="garden"]{
  --glass-accent:light-dark(var(--garden-ink),var(--sage-light));
  --glass-on-accent:light-dark(var(--cream),var(--garden-ink));
  --glass-text-accent:light-dark(var(--garden-ink),var(--sage-light));
  --glass-wall:light-dark(var(--garden-wall),color-mix(in oklab,var(--garden-wall) 46%,var(--night)));
  --glass-wall-lit:light-dark(color-mix(in oklab,var(--garden-wall) 55%,var(--sage-light)),color-mix(in oklab,var(--garden-wall) 64%,var(--night)));
  --glass-wall-shade:light-dark(color-mix(in oklab,var(--garden-wall) 72%,var(--garden-ink)),var(--night));
  --glass-haze:light-dark(var(--parchment),color-mix(in oklab,var(--garden-ink) 82%,var(--brass)));
  --glass-hill:light-dark(var(--plaster),color-mix(in oklab,var(--atelier-ink) 40%,var(--night)));
  --glass-card:light-dark(color-mix(in srgb,var(--page) 58%,transparent),color-mix(in srgb,var(--night) 54%,transparent)); /* the green wall is darker */
}