/* =====================================================================
   EDEN FOUNDATION · v1 (draft, revised 2026-09-27)
   Eden's own design system: every value Eden's interface is built from.
   Studio, the Hub, the ⌘ Eden card and the website. Nothing else.

   BASED ON THE CHROME AS IT IS. Josh, 2026-09-27: "base the chrome from the
   current hub, studio … look at studio's tool palette, hub's chrome –
   especially the iridescent borders, the flat panels." Values here are read
   from apps/studio/enter.html (the Hub) and Eden2.1/studio/index.html
   (Studio's dark mode, tool palette, rails and menus), then made one.

   ACCENT IS LIGHT, NOT COLOUR. The interface is neutral until something is
   hovered, focused, current or chosen, and then the accent is a spectral
   edge: a ring, a line or a lit glyph. Never a fill, never a hue. No moss,
   no violet (Josh, 2026-09-27: "i dont want to use moss anymore").

   It ties back to nothing but itself: not the ShopFront Foundation, not a
   business's brand layer, not Figma. DECIDED: dark by default, with a Light mode (2026-10-14) · Source Sans 3,
   bundled, never fetched · no italics · flat panels.

   Nothing loads this file yet. Surfaces switch to it one by one (master plan
   Phase 1), measured by scripts/eden-chrome-census.py and proven by
   scripts/proof-eden-foundation.py.
   ===================================================================== */

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: block;
  src: url("./fonts/source-sans-3-latin-var.woff2") format("woff2-variations"),
       url("./fonts/source-sans-3-latin-var.woff2") format("woff2");
}

@property --sheen { syntax: "<angle>"; initial-value: 0deg; inherits: false }
@keyframes eden-flow  { to { --sheen: 360deg } }                 /* a ring or a glyph turning */
@keyframes eden-slide { to { background-position-x: -200% } }    /* a line travelling */

:root {
  color-scheme: dark;

  /* ── GROUND AND SURFACES: flat ─────────────────────────────────────────
     Black under everything; flat panels on it, edged by a hairline. No
     gradient, no grain, no shadow on a panel that sits in the page. */
  --eden-black:     #121214;   /* the ground: the Hub's page, Studio's chrome and canvas (trying #121214 for #000000, 2026-09-30) */
  --eden-surface:   #0F1011;   /* a panel, a card, a tile, a banner (Studio's panel; the Hub's was #0B0C0B) */
  --eden-surface-2: #16181B;   /* a panel under the pointer, a menu, a popover (Studio's panel-2 and menu) */

  /* Glass: the one fill for rails that slide over the canvas (Josh, 2026-09-18:
     "try component rail in a glass effect fill vs opacity"). Solid black when
     there is nothing worth seeing through (over the Registry). */
  --eden-glass:        rgba(18,18,20,.77);
  --eden-glass-filter: blur(22px) saturate(140%);
  /* Scrim: black a bar or a layer holds over the page, so what scrolls under it still shows through (the Hub's top
     bar). Named 2026-09-27 when Eden's pages came into Studio and it was the one colour with no token. */
  --eden-scrim:        rgba(18,18,20,.88);

  /* Edges: paper at stated opacities. */
  --eden-line:        rgba(247,248,248,.08);   /* a panel's edge, a rule between rows */
  --eden-line-2:      rgba(247,248,248,.14);   /* an edge under the pointer, a menu's border */
  --eden-line-strong: rgba(247,248,248,.22);   /* a drop zone, a divider that must read */

  /* State fills: paper at stated opacities. The ground changes; no hue appears. */
  --eden-fill-hover: rgba(247,248,248,.045);
  --eden-fill-menu:  rgba(247,248,248,.06);    /* a menu item under the pointer */
  --eden-fill-on:    rgba(247,248,248,.10);    /* a chosen segment, a pressed toggle */
  --eden-fill-press: rgba(247,248,248,.02);

  /* ── INK ───────────────────────────────────────────────────────────────
     Paper, and paper at stated opacities. Contrast is computed on black and
     on the surfaces by scripts/proof-eden-foundation.py. */
  --eden-ink:   #F7F8F8;                    /* the value, the title, anything current */
  --eden-ink-hover: rgba(247,248,248,.86); /* the ink button under the pointer (was opacity .86 on the button) */
  --eden-ink-2: rgba(247,248,248,.65);      /* labels, secondary text (Studio's #A6A7A7) */
  --eden-ink-3: rgba(247,248,248,.50);      /* metadata, hints, idle nav (the Hub's dim and faint, made one) */
  --eden-quiet: rgba(247,248,248,.44);      /* idle glyphs, separators, disabled. Never prose (Studio's #75757A) */

  /* Status: carried in words first; colour only reinforces. No green anywhere. Never chrome. */
  --eden-ok:   #F7F8F8;   /* success is lit, not green: done reads in full ink beside dimmer pending work (Josh, 2026-09-27: "no moss please") */
  --eden-warn: #D9B27C;   /* caution and failure only (the Hub's) */

  /* ── THE SPECTRUM: the one accent, as light ────────────────────────────
     Four pastels and paper, shared by the Hub's iris and Studio's rail sheen.
     It lives on edges: a ring, a line, a lit glyph. */
  --eden-iris-cyan:     #9EE7FF;
  --eden-iris-lavender: #C9B7FF;
  --eden-iris-pink:     #F6C7E7;
  --eden-iris-butter:   #FFF4C2;

  /* The ring: a 1px spectral edge around a panel, a chip, a control, shown on
     hover, focus or when chosen. Soft, because it sits beside content. */
  --eden-iris: conic-gradient(from var(--sheen),
    rgba(158,231,255,.42), rgba(201,183,255,.42), rgba(246,199,231,.38),
    rgba(255,244,194,.34), rgba(158,231,255,.42));
  /* The line: a 1px underline for the current tab, a row under the pointer, a field in focus. */
  --eden-iris-line: linear-gradient(90deg,
    rgba(158,231,255,0), rgba(158,231,255,.55), rgba(201,183,255,.6),
    rgba(246,199,231,.55), rgba(255,244,194,.45), rgba(158,231,255,0));
  /* Full strength: keyboard focus, and marks too small to carry alpha (a dot goes grey otherwise). */
  --eden-iris-fill: conic-gradient(from var(--sheen),
    #9EE7FF, #C9B7FF, #F6C7E7, #FFF4C2, #9EE7FF);
  /* Full strength as a band, for marks that slide (a progress bar, specks): the Hub's --iris-fill. */
  --eden-iris-band: linear-gradient(100deg, #9EE7FF, #C9B7FF, #F6C7E7, #FFF4C2, #9EE7FF);
  /* The glyph and the current row: the spectrum with paper through it (Studio's rail sheen). */
  --eden-sheen: conic-gradient(from var(--sheen),
    #F7F8F8, #9EE7FF, #C9B7FF, #F6C7E7, #FFF4C2, #9EE7FF, #F7F8F8);
  --eden-sheen-glow: 0 0 4px rgba(200,215,255,.16);

  --eden-flow-ring:  3.4s;   /* a ring turns while hovered, and only while hovered */
  --eden-flow-sheen: 8s;     /* a lit glyph, the current row */
  --eden-slide-hover: 2.4s;  /* a line under the pointer */
  --eden-slide-on:    6s;    /* the current tab's line */

  /* Elevation: flat panels have none. Only what floats over other work lifts. */
  --eden-lift-menu: 0 18px 44px rgba(0,0,0,.55);   /* menus, popovers, pickers (Studio's) */
  --eden-lift-rail: 10px 0 28px rgba(0,0,0,.45);   /* a rail over the canvas (Studio's) */

  /* The canvas's dot grid. */
  --eden-dot:      #1A1B1B;
  --eden-dot-size: 18px;
  --eden-ground:   radial-gradient(var(--eden-dot) 1px, transparent 1px);

  /* ── TYPE: Source Sans 3, the Hub's scale ──────────────────────────────
     No italics. Nothing below 11px (Studio's tool words were 9px). */
  --eden-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --eden-mono: ui-monospace, "SF Mono", Menlo, monospace;   /* code and branch names only */

  --eden-t-11: 11px;   /* the system voice: eyebrows, section labels, chips, tool words */
  --eden-t-12: 12px;   /* meta: a count, a hint, a timestamp */
  --eden-t-13: 13px;   /* UI: a tab, a row, a menu item, a button, a banner's line */
  --eden-t-14: 14px;   /* a banner's title, a field in a dense form */
  --eden-t-15: 15px;   /* reading: the Hub's body */
  --eden-t-16: 16px;   /* a card's title, a field you type into */
  --eden-t-20: 20px;
  --eden-t-24: 24px;
  --eden-t-30: 30px;   /* a page title (the Hub's h1) */
  --eden-t-section: clamp(28px, 2.2vw + 14px, 40px);   /* the website */
  --eden-t-display: clamp(40px, 4.4vw + 12px, 76px);   /* the website */

  --eden-w-light:   300;   /* text you type into a field */
  --eden-w-regular: 400;
  --eden-w-medium:  500;   /* titles, buttons, eyebrows */
  --eden-w-strong:  600;   /* emphasis: weight, never italics */

  --eden-track-system: .08em;    /* uppercase labels */
  --eden-track-title:  -.015em;  /* a page title, display */
  --eden-track-normal: normal;   /* everything else: the face's own spacing */
  --eden-lh-tight: 1.05;
  --eden-lh-title: 1.25;
  --eden-lh-ui:    1.3;
  --eden-lh-body:  1.55;
  --eden-measure:  62ch;

  /* ── TEXT STYLES: type is a named style, chosen by what the text is ────
     Each is --eden-text-<style>-{family,size,weight,line-height,tracking,case}, built
     only from the tokens above. Read from how the Hub and Studio already set
     their type. A new need is a new style here, never a size on a part. */
  --eden-text-display-size: var(--eden-t-display);   --eden-text-display-weight: var(--eden-w-regular);
  --eden-text-display-line-height: var(--eden-lh-tight); --eden-text-display-tracking: var(--eden-track-title); --eden-text-display-case: none;
  --eden-text-section-size: var(--eden-t-section);   --eden-text-section-weight: var(--eden-w-regular);   /* lighter (Josh, 2026-10-27: "overall lighter weight fonts across this site") */
  --eden-text-section-line-height: var(--eden-lh-title); --eden-text-section-tracking: var(--eden-track-title); --eden-text-section-case: none;
  --eden-text-page-title-size: var(--eden-t-30);     --eden-text-page-title-weight: var(--eden-w-regular);   /* the Hub's h1 */
  --eden-text-page-title-line-height: var(--eden-lh-title); --eden-text-page-title-tracking: var(--eden-track-title); --eden-text-page-title-case: none;
  --eden-text-heading-size: var(--eden-t-20);        --eden-text-heading-weight: var(--eden-w-regular);    /* a section heading in the tool */
  --eden-text-heading-line-height: var(--eden-lh-ui); --eden-text-heading-tracking: var(--eden-track-normal); --eden-text-heading-case: none;
  --eden-text-title-size: var(--eden-t-16);          --eden-text-title-weight: var(--eden-w-medium);       /* a card's, a panel's, a rail's title */
  --eden-text-title-line-height: var(--eden-lh-ui);  --eden-text-title-tracking: var(--eden-track-normal); --eden-text-title-case: none;
  --eden-text-body-size: var(--eden-t-15);           --eden-text-body-weight: var(--eden-w-regular);       /* reading */
  --eden-text-body-line-height: var(--eden-lh-body); --eden-text-body-tracking: var(--eden-track-normal); --eden-text-body-case: none;
  --eden-text-body-light-size: var(--eden-t-15);     --eden-text-body-light-weight: var(--eden-w-light);   /* long reading, a letter (Josh, 2026-10-27: "add a Body light text style (weight 300)") */
  --eden-text-body-light-line-height: var(--eden-lh-body); --eden-text-body-light-tracking: var(--eden-track-normal); --eden-text-body-light-case: none;
  --eden-text-ui-size: var(--eden-t-13);             --eden-text-ui-weight: var(--eden-w-regular);         /* a row, a tab, a menu item */
  --eden-text-ui-line-height: var(--eden-lh-ui);     --eden-text-ui-tracking: var(--eden-track-normal); --eden-text-ui-case: none;
  --eden-text-action-size: var(--eden-t-13);         --eden-text-action-weight: var(--eden-w-medium);      /* a button's words */
  --eden-text-action-line-height: var(--eden-lh-ui); --eden-text-action-tracking: var(--eden-track-normal); --eden-text-action-case: none;
  --eden-text-field-size: var(--eden-t-16);          --eden-text-field-weight: var(--eden-w-light);        /* what a person types */
  --eden-text-field-line-height: var(--eden-lh-ui);  --eden-text-field-tracking: var(--eden-track-normal); --eden-text-field-case: none;
  --eden-text-meta-size: var(--eden-t-12);           --eden-text-meta-weight: var(--eden-w-regular);       /* a count, a hint, a time */
  --eden-text-meta-line-height: var(--eden-lh-ui);   --eden-text-meta-tracking: var(--eden-track-normal); --eden-text-meta-case: none;
  --eden-text-small-size: var(--eden-t-11);          --eden-text-small-weight: var(--eden-w-regular);      /* small words in dense UI: a tool word, a hint in a rail */
  --eden-text-small-line-height: var(--eden-lh-ui);  --eden-text-small-tracking: var(--eden-track-normal); --eden-text-small-case: none;
  --eden-text-label-size: var(--eden-t-11);          --eden-text-label-weight: var(--eden-w-medium);       /* the system voice */
  --eden-text-label-line-height: var(--eden-lh-ui);  --eden-text-label-tracking: var(--eden-track-system); --eden-text-label-case: uppercase;
  /* one face for every style; named per style so a tool that sets a style by its parts finds all six */
  --eden-text-display-family: var(--eden-sans);
  --eden-text-section-family: var(--eden-sans);
  --eden-text-page-title-family: var(--eden-sans);
  --eden-text-heading-family: var(--eden-sans);
  --eden-text-title-family: var(--eden-sans);
  --eden-text-body-family: var(--eden-sans);
  --eden-text-body-light-family: var(--eden-sans);
  --eden-text-ui-family: var(--eden-sans);
  --eden-text-action-family: var(--eden-sans);
  --eden-text-field-family: var(--eden-sans);
  --eden-text-meta-family: var(--eden-sans);
  --eden-text-small-family: var(--eden-sans);
  --eden-text-label-family: var(--eden-sans);

  /* ── SPACE: named by value, like type and radii ────────────────────────
     Sixteen steps, dense where UI is dense. The Hub's most used values are
     8, 12, 10, 6, 14, 4, 16 and 18 (478 uses of 42 values, 2026-09-27); 18, 22,
     30 and 46 were single-place values and snap to 16 or 20, 24, 32 and 48.
     Named by value so a step never silently changes size (eden-ui.css's
     numbered --eden-s-7 was 24px). */
  --eden-space-0: 0px;   /* nothing between: a flush row, a zero inset */
  --eden-space-2: 2px;   --eden-space-4: 4px;   --eden-space-6: 6px;   --eden-space-8: 8px;
  --eden-space-10: 10px; --eden-space-12: 12px; --eden-space-14: 14px; --eden-space-16: 16px;
  --eden-space-20: 20px; --eden-space-24: 24px; --eden-space-28: 28px; --eden-space-32: 32px; --eden-space-40: 40px;   /* 28: Josh, 2026-09-27, used 44 times across the Hub and Studio */
  --eden-space-48: 48px; --eden-space-56: 56px; --eden-space-80: 80px;

  /* ── SHAPE: six radii, and square ──────────────────────────────────────*/
  --eden-r-0:    0px;    /* square: a page, a full-bleed band */
  --eden-r-2:    2px;    /* a well in a rail */
  --eden-r-4:    4px;    /* a tag, a small swatch's corner */
  --eden-r-6:    6px;    /* a row or a menu item's hover ground */
  --eden-r-10:   10px;   /* a tool, a control, an action tile, a banner, a menu */
  --eden-r-14:   14px;   /* a card, a panel, the ⌘ Eden card */
  --eden-r-pill: 999px;  /* a chip, the button */

  /* ── SIZE ──────────────────────────────────────────────────────────────*/
  --eden-h-row:   28px;   /* a menu item, a rail row */
  --eden-h-tool:  36px;   /* a tool in the palette, an icon button */
  --eden-h-bar:   54px;   /* the bar, a rail's header: one band across the top */
  --eden-h-touch: 44px;   /* every target on a touch screen */
  --eden-i-sm: 14px; --eden-i-md: 18px; --eden-i-lg: 20px;   /* icons: in a row · in a bar · on the palette */
  --eden-stroke: 1.5;                                       /* stroked, never filled */
  --eden-edge-1: 1px;   /* a hairline: every panel's edge, every rule */
  --eden-edge-2: 2px;   /* a pressed or a keyboard-focus edge that must read */
  --eden-palette-w:   70px;
  --eden-rail-w:      300px;
  --eden-inspector-w: 280px;
  --eden-menu-min:    200px;
  --eden-page-w:      880px;    /* the Hub's column */
  --eden-site-w:      1240px;   /* the website's content */

  /* ── LAYERS ────────────────────────────────────────────────────────────*/
  --eden-z-canvas: 0;    --eden-z-marks: 1000;  --eden-z-grid: 1100;  --eden-z-chrome: 2000;
  --eden-z-rail: 2100;   --eden-z-inspector: 2200;  --eden-z-menu: 2400;
  --eden-z-notice: 2600; --eden-z-confirm: 2800;    --eden-z-drag: 3000;

  /* ── MOTION: the Hub's curves ──────────────────────────────────────────
     Opacity and a small rise; no scaling, no spring, no glow. Leaving is
     quicker than arriving. Reduced motion turns all of it off. */
  --eden-ease:     cubic-bezier(.22,.61,.36,1);
  --eden-ease-out: cubic-bezier(.16,.84,.44,1);
  --eden-fast:     160ms;   /* hover grounds, colour */
  --eden-normal:   200ms;   /* a ring or a line fading in */
  --eden-enter:    220ms;   /* a menu, a card, a rail arriving */
  --eden-exit:     140ms;   /* anything leaving */
  --eden-shell:    320ms;   /* a page arriving */
  --eden-rise:     -1px;    /* a panel under the pointer rises this far */
  --eden-travel:   6px;     /* how far an arriving surface moves */
}

/* ── MODES: Dark is the ground; Light is Studio's own light interface (Josh, 2026-10-14: "Eden studio has light and dark modes
   too"). A mode is a [data-scheme] scope, the way Studio scopes a business's colour modes: a section or page set to Light
   redeclares only the colours that change, and everything built on them follows. Dark restates the :root values, so a
   dark section inside a light page reads dark.

   LIGHT IS MEASURED, NOT INVENTED. Studio's dark interface already uses these exact values (Eden2.1/studio/index.html,
   :root[data-mode="dark"]: --chrome-bg #121214, --panel #0F1011, --panel-2 #16181B, --ink #F7F8F8, hairlines at 8, 14
   and 22%), so each Eden colour's light value is its counterpart's in Studio's light :root. Marked per line:
   measured (Studio's light value), adjusted (Studio's value moved the least that meets the contrast gate) or derived (a dark value with no light counterpart: its opacity kept, the colour
   turned to ink). Open: --eden-warn and --eden-dot have no light counterpart in Studio and keep their dark values.
   The spectrum is the same in both: it is light, not colour. ── */
[data-scheme="dark"] {
  color-scheme: dark;
  --eden-black: #121214; --eden-surface: #0F1011; --eden-surface-2: #16181B;
  --eden-glass: rgba(18,18,20,.77); --eden-scrim: rgba(18,18,20,.88);
  --eden-line: rgba(247,248,248,.08); --eden-line-2: rgba(247,248,248,.14); --eden-line-strong: rgba(247,248,248,.22);
  --eden-fill-hover: rgba(247,248,248,.045); --eden-fill-menu: rgba(247,248,248,.06); --eden-fill-on: rgba(247,248,248,.10);
  --eden-fill-press: rgba(247,248,248,.02);
  --eden-ink: #F7F8F8; --eden-ink-hover: rgba(247,248,248,.86); --eden-ink-2: rgba(247,248,248,.65);
  --eden-ink-3: rgba(247,248,248,.50); --eden-quiet: rgba(247,248,248,.44); --eden-ok: #F7F8F8;
}
[data-scheme="light"] {
  color-scheme: light;
  --eden-black: #f4f4f5;                 /* measured: --chrome-bg */
  --eden-surface: #ffffff;               /* measured: --panel */
  --eden-surface-2: #fafafa;             /* measured: --panel-2 */
  --eden-glass: rgba(255,255,255,.77);   /* derived: --rail is #fff; the glass's opacity kept */
  --eden-scrim: rgba(244,244,245,.88);   /* derived: the light ground at the scrim's opacity */
  --eden-line: #e4e4e7;                  /* measured: --line */
  --eden-line-2: #d4d4d8;                /* measured: --line-2 */
  --eden-line-strong: #c4c4cc;           /* measured: --line-strong */
  --eden-fill-hover: rgba(0,0,0,.045);   /* measured: --studio-fill-hover */
  --eden-fill-menu: rgba(0,0,0,.06);     /* derived */
  --eden-fill-on: rgba(0,0,0,.10);       /* derived */
  --eden-fill-press: rgba(0,0,0,.02);    /* derived */
  --eden-ink: #18181b;                   /* measured: --ink */
  --eden-ink-hover: rgba(24,24,27,.86);  /* derived */
  --eden-ink-2: #52525b;                 /* measured: --ink-2 */
  --eden-ink-3: #6f6f76;                 /* adjusted: --muted #71717a, darkened one step to reach 4.5:1 on the light ground */
  --eden-quiet: #8c8c93;                 /* adjusted: --faint #a1a1aa, darkened to reach 3:1 as a glyph */
  --eden-ok: #18181b;                    /* derived: ok is ink */
}

/* ── BASE ────────────────────────────────────────────────────────────── */

.eden-root, .eden-root * { box-sizing: border-box }
.eden-root {
  background: var(--eden-black);
  color: var(--eden-ink);
  font: var(--eden-w-regular) var(--eden-t-15)/var(--eden-lh-body) var(--eden-sans);
  font-synthesis: none;               /* no italics, ever */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
.eden-root em, .eden-root i { font-style: normal; font-weight: var(--eden-w-strong) }

/* A text style, as a class a part can wear: .eden-text-<style>. */
.eden-text-display { font-family: var(--eden-text-display-family); font-size: var(--eden-text-display-size); font-weight: var(--eden-text-display-weight); line-height: var(--eden-text-display-line-height); letter-spacing: var(--eden-text-display-tracking); text-transform: var(--eden-text-display-case) }
.eden-text-section { font-family: var(--eden-text-section-family); font-size: var(--eden-text-section-size); font-weight: var(--eden-text-section-weight); line-height: var(--eden-text-section-line-height); letter-spacing: var(--eden-text-section-tracking); text-transform: var(--eden-text-section-case) }
.eden-text-page-title { font-family: var(--eden-text-page-title-family); font-size: var(--eden-text-page-title-size); font-weight: var(--eden-text-page-title-weight); line-height: var(--eden-text-page-title-line-height); letter-spacing: var(--eden-text-page-title-tracking); text-transform: var(--eden-text-page-title-case) }
.eden-text-heading { font-family: var(--eden-text-heading-family); font-size: var(--eden-text-heading-size); font-weight: var(--eden-text-heading-weight); line-height: var(--eden-text-heading-line-height); letter-spacing: var(--eden-text-heading-tracking); text-transform: var(--eden-text-heading-case) }
.eden-text-title { font-family: var(--eden-text-title-family); font-size: var(--eden-text-title-size); font-weight: var(--eden-text-title-weight); line-height: var(--eden-text-title-line-height); letter-spacing: var(--eden-text-title-tracking); text-transform: var(--eden-text-title-case) }
.eden-text-body { font-family: var(--eden-text-body-family); font-size: var(--eden-text-body-size); font-weight: var(--eden-text-body-weight); line-height: var(--eden-text-body-line-height); letter-spacing: var(--eden-text-body-tracking); text-transform: var(--eden-text-body-case) }
.eden-text-body-light { font-family: var(--eden-text-body-light-family); font-size: var(--eden-text-body-light-size); font-weight: var(--eden-text-body-light-weight); line-height: var(--eden-text-body-light-line-height); letter-spacing: var(--eden-text-body-light-tracking); text-transform: var(--eden-text-body-light-case) }
.eden-text-ui { font-family: var(--eden-text-ui-family); font-size: var(--eden-text-ui-size); font-weight: var(--eden-text-ui-weight); line-height: var(--eden-text-ui-line-height); letter-spacing: var(--eden-text-ui-tracking); text-transform: var(--eden-text-ui-case) }
.eden-text-action { font-family: var(--eden-text-action-family); font-size: var(--eden-text-action-size); font-weight: var(--eden-text-action-weight); line-height: var(--eden-text-action-line-height); letter-spacing: var(--eden-text-action-tracking); text-transform: var(--eden-text-action-case) }
.eden-text-field { font-family: var(--eden-text-field-family); font-size: var(--eden-text-field-size); font-weight: var(--eden-text-field-weight); line-height: var(--eden-text-field-line-height); letter-spacing: var(--eden-text-field-tracking); text-transform: var(--eden-text-field-case) }
.eden-text-meta { font-family: var(--eden-text-meta-family); font-size: var(--eden-text-meta-size); font-weight: var(--eden-text-meta-weight); line-height: var(--eden-text-meta-line-height); letter-spacing: var(--eden-text-meta-tracking); text-transform: var(--eden-text-meta-case) }
.eden-text-small { font-family: var(--eden-text-small-family); font-size: var(--eden-text-small-size); font-weight: var(--eden-text-small-weight); line-height: var(--eden-text-small-line-height); letter-spacing: var(--eden-text-small-tracking); text-transform: var(--eden-text-small-case) }
.eden-text-label { font-family: var(--eden-text-label-family); font-size: var(--eden-text-label-size); font-weight: var(--eden-text-label-weight); line-height: var(--eden-text-label-line-height); letter-spacing: var(--eden-text-label-tracking); text-transform: var(--eden-text-label-case) }

/* The system voice. */
.eden-system {
  font-size: var(--eden-t-11); font-weight: var(--eden-w-medium);
  letter-spacing: var(--eden-track-system); text-transform: uppercase; color: var(--eden-ink-3);
}

/* A flat panel: surface, hairline, radius. Lifts 1px and lightens under the pointer. */
.eden-panel {
  position: relative; background: var(--eden-surface); border: 1px solid var(--eden-line);
  border-radius: var(--eden-r-14);
  transition: background var(--eden-fast) var(--eden-ease), transform var(--eden-fast) var(--eden-ease);
}
.eden-panel.is-live:hover { background: var(--eden-surface-2); transform: translateY(var(--eden-rise)) }

/* The ring: a 1px spectral edge, shown on hover, keyboard focus or when chosen, turning only then. */
.eden-ring { position: relative }
.eden-ring::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--eden-iris); opacity: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity var(--eden-normal) var(--eden-ease);
}
.eden-ring:hover:not(:disabled)::before, .eden-ring.is-on::before { opacity: 1; animation: eden-flow var(--eden-flow-ring) linear infinite }
/* Keyboard focus is the same edge at full strength, so it clears 3:1 on every surface. */
.eden-ring:focus-visible { outline: none }
.eden-ring:focus-visible::before { opacity: 1; background: var(--eden-iris-fill); animation: eden-flow var(--eden-flow-ring) linear infinite }
.eden-root :focus-visible:not(.eden-ring) { outline: 2px solid var(--eden-ink); outline-offset: 2px }

/* The line: a 1px spectral underline. */
.eden-line { position: relative }
.eden-line::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: var(--eden-iris-line); background-size: 200% 100%; opacity: 0;
  transition: opacity var(--eden-normal) var(--eden-ease);
}
.eden-line:hover::after { opacity: .7; animation: eden-slide var(--eden-slide-hover) linear infinite }
.eden-line.is-on::after, .eden-line:focus-within::after { opacity: 1; animation: eden-slide var(--eden-slide-on) linear infinite }

/* The lit glyph: a chosen tool is its icon taking the sheen, never a box. */
.eden-glyph-on { color: var(--eden-ink); filter: drop-shadow(var(--eden-sheen-glow)) }

.eden-root [disabled], .eden-root [aria-disabled="true"] { opacity: .35; pointer-events: none; cursor: default }

@media (pointer: coarse) { :root { --eden-h-row: var(--eden-h-touch); --eden-h-tool: var(--eden-h-touch) } }
@media (prefers-reduced-motion: reduce) {
  :root { --eden-fast: 0ms; --eden-normal: 0ms; --eden-enter: 0ms; --eden-exit: 0ms; --eden-shell: 0ms; --eden-travel: 0px; --eden-rise: 0px }
  .eden-ring::before, .eden-line::after { animation: none !important }
}