/* 182: the Glownomics interface system, one source of tokens for every surface
   (marketing pages, the owner app, booking pages, the receptionist, admin and agency).
   Built from the founder-approved receptionist language (2026-10-02): warm porcelain
   neutrals, the forest green, and the gold pill as the one primary action. Sentence
   case, weights 400 to 600, one icon set; 184 adds light, tinted depth and physical motion
   (the second :root block below). The full rules are in
   docs/design/glownomics-interface-182.md. Be Vietnam Pro is self-hosted (OFL 1.1,
   public/fonts/be-vietnam-pro-v1/OFL.txt). */

@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/be-vietnam-pro-v1/be-vietnam-pro-vietnamese-400-normal.woff2) format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/be-vietnam-pro-v1/be-vietnam-pro-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/be-vietnam-pro-v1/be-vietnam-pro-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/be-vietnam-pro-v1/be-vietnam-pro-vietnamese-500-normal.woff2) format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/be-vietnam-pro-v1/be-vietnam-pro-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/be-vietnam-pro-v1/be-vietnam-pro-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/be-vietnam-pro-v1/be-vietnam-pro-vietnamese-600-normal.woff2) format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/be-vietnam-pro-v1/be-vietnam-pro-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/be-vietnam-pro-v1/be-vietnam-pro-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* 184: Fraunces (OFL 1.1, public/fonts/fraunces-v1/OFL.txt), the display serif for headlines and page titles; 500 upright, 400 italic. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500; font-display: optional; src: url(/fonts/fraunces-v1/fraunces-vietnamese-500-normal.woff2) format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500; font-display: optional; src: url(/fonts/fraunces-v1/fraunces-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500; font-display: optional; src: url(/fonts/fraunces-v1/fraunces-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400; font-display: optional; src: url(/fonts/fraunces-v1/fraunces-vietnamese-400-italic.woff2) format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400; font-display: optional; src: url(/fonts/fraunces-v1/fraunces-latin-ext-400-italic.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400; font-display: optional; src: url(/fonts/fraunces-v1/fraunces-latin-400-italic.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  /* Type. One family for the interface and the headlines; the system serif only for the one
     italic phrase in a marketing hero; mono only for codes, never for labels. */
  --g-font: "Be Vietnam Pro", "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Helvetica Neue", Arial, sans-serif;
  --g-serif: ui-serif, "New York", "Iowan Old Style", "Sitka Display", Georgia, Cambria, "Times New Roman", serif;
  --g-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --g-weight: 400;
  --g-weight-medium: 500;
  --g-weight-strong: 600;
  /* Sizes: 12 is the floor for anything people read. */
  --g-size-12: 12px;
  --g-size-13: 13px;
  --g-size-14: 14px;
  --g-size-15: 15px;
  --g-size-16: 16px;
  --g-size-18: 18px;
  --g-size-20: 20px;
  --g-size-24: 24px;
  --g-size-28: 28px;
  --g-size-32: 32px;
  --g-size-40: 40px;
  --g-size-48: 48px;
  --g-size-56: 56px;
  --g-size-64: 64px;
  --g-size-72: 72px;
  /* Tracking: none under 16px; tighter only on display sizes. */
  --g-track-display: -0.02em;   /* 40 to 55px */
  --g-track-hero: -0.03em;      /* 56px and up */
  --g-track-title: -0.01em;     /* 20 to 39px */

  /* Neutrals: warm porcelain for light surfaces. Hairlines are the text color at 10%. */
  --g-canvas: #f5f3ee;          /* page background */
  --g-card: #ffffff;            /* cards, sheets, the booking flow */
  --g-raised: #faf8f4;          /* a hovered row, a quiet inset */
  --g-fill: #ebe7de;            /* segmented tracks, chips, inactive tiles */
  --g-fill-hover: #e2ddd2;
  --g-text: #17201b;            /* 15.0:1 on canvas */
  --g-text-2: #5f665f;          /* secondary, 5.3:1 on canvas */
  --g-text-3: #686e66;          /* muted meta and icons, 4.7:1 on canvas, 5.2:1 on card; not on --g-fill under 14px */
  --g-line: rgba(23, 32, 27, 0.10);
  --g-line-strong: rgba(23, 32, 27, 0.16);
  --g-field-edge: #858b84;      /* input and control borders, 3.5:1 on card (WCAG 1.4.11) */

  /* Brand: the forest for dark surfaces (flat: depth from steps and hairlines, no radial light). */
  --g-forest: #0b1a14;          /* sidebars, the live call, dark panels */
  --g-forest-2: #12241c;        /* a card on the forest */
  --g-forest-3: #1a2e25;        /* a raised or active row on the forest */
  --g-on-dark: #f5f5f2;         /* 16.4:1 on forest */
  --g-on-dark-2: rgba(245, 245, 242, 0.72);
  --g-on-dark-3: rgba(245, 245, 242, 0.56);
  --g-dark-line: rgba(255, 255, 255, 0.10);
  --g-rim: inset 0 1px 0 rgba(226, 194, 117, 0.22); /* the one top highlight allowed on dark */

  /* Green tint: links, selection, switches, focus. */
  --g-tint: #0f6b4f;            /* 5.9:1 on canvas */
  --g-tint-hover: #0b5a42;
  --g-tint-soft: rgba(15, 107, 79, 0.10);
  --g-tint-ring: rgba(15, 107, 79, 0.35);
  --g-tint-on-dark: #7fcaa8;

  /* Gold: the one primary action (the gold pill) and the live dot. Never a glow. */
  --g-gold: #d4ad4b;
  --g-gold-hover: #dcb95e;
  --g-gold-active: #c49d3e;
  --g-gold-ink: #05150f;        /* text on gold, 8.8:1 */
  --g-gold-text: #6f5a1f;       /* gold as text on light, 6.0:1 on canvas */
  --g-gold-on-dark: #e2c275;    /* gold as text on the forest, 10.4:1 */
  --g-brass: #a17d25;           /* the live dot on light surfaces, 3.5:1 on canvas */

  /* Meaning only. */
  --g-positive: #1d7a4f;
  --g-positive-soft: rgba(29, 122, 79, 0.10);
  --g-negative: #b42d2d;
  --g-negative-soft: rgba(180, 45, 45, 0.08);
  --g-warning: #8a5a00;
  --g-warning-soft: rgba(176, 120, 10, 0.12);

  /* Spacing: the 4px scale. */
  --g-space-1: 4px;
  --g-space-2: 8px;
  --g-space-3: 12px;
  --g-space-4: 16px;
  --g-space-5: 20px;
  --g-space-6: 24px;
  --g-space-8: 32px;
  --g-space-10: 40px;
  --g-space-12: 48px;
  --g-space-16: 64px;
  --g-space-20: 80px;
  --g-space-24: 96px;
  --g-space-32: 128px;

  /* Radius by size; inner = outer - padding, never below 4. Buttons are pills. */
  --g-radius-xs: 6px;           /* tags, keycaps, small chips */
  --g-radius-sm: 8px;           /* inputs, rows, segmented items */
  --g-radius-md: 10px;          /* controls, menus */
  --g-radius-lg: 12px;          /* cards */
  --g-radius-xl: 16px;          /* panels, sheets */
  --g-radius-2xl: 20px;         /* large hero panels */
  --g-radius-pill: 999px;       /* buttons only */

  /* Depth: neutral and small on light, none on dark. */
  --g-shadow-sm: 0 1px 2px rgba(23, 32, 27, 0.06);
  --g-shadow-md: 0 8px 24px rgba(23, 32, 27, 0.08), 0 1px 2px rgba(23, 32, 27, 0.05);
  --g-focus-ring: 0 0 0 3px var(--g-tint-ring);
  --g-focus-outline: 2px solid var(--g-tint);          /* :focus-visible on light, offset 2px */
  --g-focus-outline-dark: 2px solid var(--g-on-dark);  /* :focus-visible on the forest */

  /* Motion: one curve; transform, opacity and colors only. */
  --g-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --g-fast: 140ms;
  --g-base: 200ms;
  --g-enter: 320ms;

  /* Layout. */
  --g-sidebar: 264px;
  --g-content-max: 1440px;
  --g-reading-max: 68ch;
  --g-row: 36px;                /* default row and nav row */
  --g-touch: 44px;              /* minimum touch target */
}

/* 184: golden hour. The 182 system made every surface a hairline card on porcelain; this layer
   gives it warmth, depth and motion (docs/design/glownomics-interface-182.md, "184"). Founder
   rules still hold: flat even gold on buttons (no gradient, sheen or bevel), no one-sided stripes. */
:root {
  --g-display: "Fraunces", var(--g-serif);   /* headlines and page titles */

  /* Depth: shadows carry the forest hue, layered from contact to ambient. */
  --g-shadow-sm: 0 1px 2px rgba(11, 26, 20, 0.07), 0 1px 1px rgba(11, 26, 20, 0.04);
  --g-shadow-card: 0 1px 2px rgba(11, 26, 20, 0.05), 0 6px 16px -6px rgba(11, 26, 20, 0.10);
  --g-shadow-md: 0 14px 36px -10px rgba(11, 26, 20, 0.20), 0 2px 6px rgba(11, 26, 20, 0.06);
  --g-shadow-lg: 0 40px 80px -32px rgba(5, 21, 15, 0.55), 0 16px 32px -16px rgba(5, 21, 15, 0.30);
  --g-shadow-gold: 0 10px 24px -10px rgba(161, 125, 37, 0.65), 0 2px 4px rgba(161, 125, 37, 0.18);
  --g-edge: rgba(23, 32, 27, 0.07);          /* the hairline under a shadowed card */

  /* Light on the forest: a warm lamp top-left, leaf green bottom-right (dark surfaces only). */
  --g-glow-forest: radial-gradient(80% 70% at 8% 0%, rgba(212, 173, 75, 0.18), transparent 62%), radial-gradient(70% 80% at 100% 100%, rgba(15, 107, 79, 0.32), transparent 66%);
  --g-glow-day: radial-gradient(90% 60% at 85% -10%, rgba(212, 173, 75, 0.10), transparent 60%);

  /* Tonal surfaces for color moments on light. */
  --g-gold-soft: #f7efda;
  --g-gold-edge: rgba(161, 125, 37, 0.28);
  --g-sage-soft: #e7efe9;

  /* Motion (184): press sinks to 95% and springs back; expand is ease-out 350ms;
     digits roll in 100ms apart; the success tick draws circle then tick in 470ms. */
  --g-spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.103, 1.085 30.7%, 1.008 39.1%, 0.991 43.4%, 0.988 47.3%, 1.001 63.7%, 1);
  --g-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --g-press: 0.95;
  --g-expand: 350ms;
  --g-release: 520ms;
  --g-roll-step: 100ms;
  --g-tick: 470ms;
}
@supports not (transition-timing-function: linear(0, 1)) {
  :root { --g-spring: cubic-bezier(0.34, 1.56, 0.64, 1); }
}

/* Rolling numbers: each digit rises into its slot (src/motion.js and public/welcome.js add the spans). */
.g-roll-digit { display: inline-block; overflow: clip; overflow-clip-margin: 0.08em; vertical-align: baseline; }
.g-roll-digit > span { display: inline-block; animation: g-roll var(--g-expand) var(--g-ease-out) both; animation-delay: calc(var(--i, 0) * var(--g-roll-step)); }
@keyframes g-roll { from { transform: translateY(105%); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }

/* The success tick: the circle draws first, then the tick, 470ms in all. */
.g-tick { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.g-tick circle { stroke-dasharray: 63; stroke-dashoffset: 0; opacity: 0.55; }
.g-tick path { stroke-dasharray: 16; stroke-dashoffset: 0; }
.g-tick.is-drawing circle { animation: g-draw-circle calc(var(--g-tick) * 0.6) var(--g-ease-out) both; }
.g-tick.is-drawing path { animation: g-draw-tick calc(var(--g-tick) * 0.4) var(--g-ease-out) calc(var(--g-tick) * 0.6) both; }
@keyframes g-draw-circle { from { stroke-dashoffset: 63; } }
@keyframes g-draw-tick { from { stroke-dashoffset: 16; } }

/* The signature: a small brass dot, only where something is really live (a call in
   progress, a technician serving now, the studio making a post). Static by default;
   add .is-pulsing only while the live thing is happening. */
.g-live-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--g-brass); box-shadow: 0 0 0 2px rgba(161, 125, 37, 0.18); vertical-align: middle; }
.g-on-dark .g-live-dot, .g-live-dot.on-dark { background: var(--g-gold); box-shadow: 0 0 0 2px rgba(212, 173, 75, 0.22); }
.g-live-dot.is-pulsing { animation: g-live 1.6s var(--g-ease) infinite; }
@keyframes g-live { 0%, 100% { box-shadow: 0 0 0 2px rgba(212, 173, 75, 0.22); } 50% { box-shadow: 0 0 0 5px rgba(212, 173, 75, 0.08); } }

/* Shared helpers. */
.g-icon { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.g-icon-18 { width: 18px; height: 18px; }
.g-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.g-skip-link { position: absolute; left: 16px; top: -64px; z-index: 1000; padding: 10px 16px; border-radius: var(--g-radius-pill); background: var(--g-forest); color: var(--g-on-dark); font: 500 14px/20px var(--g-font); text-decoration: none; transition: transform var(--g-fast) var(--g-ease); }
.g-skip-link:focus { transform: translateY(80px); outline: none; box-shadow: var(--g-focus-ring); }
.g-tabular { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}