/* GENERATED by scripts/sync-internal-css.mjs from public/css/site.css (its :root block, verbatim).
   Do not edit here: change site.css, then run the script. The internal apps read this before
   shell.css, so their colours, type and motion are the public site's own. */

:root {
  /* Brand core */
  --ybb-deep-teal: #2D4554;
  --ybb-warm-gold: #EDB23B;
  --ybb-white: #FFFFFF;
  --ybb-black: #000000;

  /* Teal ramp */
  --teal-900: #16232C;
  --teal-800: #1F323E;
  --teal-700: #2D4554;
  --teal-600: #3D5A6C;
  --teal-500: #527387;
  --teal-400: #7B95A5;
  --teal-300: #A6B8C3;
  --teal-200: #CBD8DF;
  --teal-100: #E3EBEF;
  --teal-50:  #F2F6F8;

  /* Gold ramp */
  --gold-700: #9C6C12;
  --gold-600: #C4901F;
  --gold-500: #EDB23B;
  --gold-400: #F3C86F;
  --gold-300: #F8DBA1;
  --gold-200: #FBEACA;
  --gold-100: #FDF6E7;

  /* Warm neutrals */
  --sand-100: #FAF8F5;
  --sand-200: #F1EDE7;
  --sand-300: #E2DCD3;
  --ink-900: #141A1F;
  --ink-700: #3A464E;
  --ink-500: #66737C;
  --ink-600: #46535C;  /* muted text: 7:1+ on white, sand-100, and gold-100 (AAA pass, Sep 15, 2026) */
  --ink-300: #9AA5AC;

  /* Semantic surfaces */
  --surface-page: var(--ybb-white);
  --surface-page-warm: var(--sand-100);
  --surface-card: var(--ybb-white);
  --surface-subtle: var(--teal-50);
  --surface-inverse: var(--ybb-deep-teal);
  --surface-inverse-deep: var(--teal-900);
  --surface-accent-soft: var(--gold-100);

  /* Semantic text */
  --text-heading: var(--ybb-deep-teal);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-600);
  --text-on-inverse: var(--ybb-white);
  --text-on-inverse-muted: var(--teal-200);
  --text-on-accent: var(--teal-900);
  --text-link: var(--gold-700);
  --text-link-hover: var(--ybb-deep-teal);

  /* Borders */
  --border-hairline: var(--teal-100);
  --border-default: var(--teal-200);
  --border-strong: var(--teal-400);
  --border-inverse: rgba(255, 255, 255, .24);
  --rule-accent: var(--ybb-warm-gold);

  /* Interactive */
  --action-primary: var(--ybb-warm-gold);
  --action-primary-hover: var(--gold-600);
  --action-primary-active: var(--gold-700);
  --action-primary-text: var(--teal-900);
  --action-secondary: var(--ybb-deep-teal);
  --action-secondary-hover: var(--teal-800);
  --action-secondary-active: var(--teal-900);
  --action-secondary-text: var(--ybb-white);
  --action-quiet-hover: var(--teal-50);
  --focus-ring: var(--gold-600);

  /* Typography */
  --font-sans: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: var(--font-sans);
  --font-display: var(--font-sans);

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --text-display: clamp(40px, 5vw, 64px);
  --text-h1: clamp(36px, 3.6vw, 48px);
  --text-h2: clamp(28px, 2.6vw, 36px);
  --text-h3: clamp(22px, 2vw, 28px);
  --text-body-lg: 18px;
  --text-body-md: 16px;
  --text-body-sm: 14px;
  --text-label: 12px;

  --leading-display: 1.1;
  --leading-heading: 1.22;
  --leading-body: 1.6;
  --leading-body-loose: 1.65;

  --tracking-display: -0.01em;
  --tracking-heading: -0.005em;
  --tracking-body: 0;
  --tracking-label: 0.08em;

  /* Motion */
  --ease-standard: cubic-bezier(.32, .72, .28, 1);
  --ease-out-soft: cubic-bezier(.16, .84, .44, 1);
  --ease-in-soft: cubic-bezier(.55, .06, .68, .19);
  --duration-instant: 90ms;
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;
  --duration-breath: 900ms;
  --transition-control:
    background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);

  /* Layout */
  --header-h: 84px;
  --content-max: 1200px;
  --content-pad: clamp(16px, 5vw, 80px);
}