/*
 * Garden Room tokens, generated by tools/garden-room/sync.py from
 * apps/sgc-share/brand/garden-room.css. Do not edit: change the source and
 * re-run the script. `sync.py --check` fails on drift.
 */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-var-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-var.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* @garden-room-tokens:start
 * Everything between these markers is the token set. Apps outside SGC Share
 * (SGC Home, sgc-la.com) carry a byte-identical copy; their tests fail if it
 * drifts from this file.
 */
:root {
  /* Marble: the quartzite counter, read as petal greys with a plum cast. The ink. */
  --marble-50: #FDF7FA;
  --marble-100: #F5EEF1;
  --marble-200: #E6DDE1;
  --marble-300: #CFC4C9;
  --marble-400: #AB9DA3;
  --marble-500: #8A7C82;
  --marble-600: #6E5E65;
  --marble-700: #55454C;
  --marble-800: #3F3037;
  --marble-900: #2C2025;
  --marble-950: #1A1115;

  /* Sage: the pistachio wall. The ground every page stands on. */
  --sage-50: #F4FBEC;
  --sage-100: #E9F5DC;
  --sage-200: #DAECC5;
  --sage-300: #C5DFA8;
  --sage-400: #A9C686;
  --sage-500: #8AA766;
  --sage-600: #6B844A;
  --sage-700: #4F6335;
  --sage-800: #374524;
  --sage-900: #232D17;
  --sage-950: #141B0C;

  /* Emerald: the velvet chair, a garden green. Evening ground, success. */
  --emerald-50: #EAFAF0;
  --emerald-100: #D6F1E2;
  --emerald-200: #BCE2CC;
  --emerald-300: #9ACBAF;
  --emerald-400: #71AA8B;
  --emerald-500: #50886B;
  --emerald-600: #376A50;
  --emerald-700: #28523C;
  --emerald-800: #193B2A;
  --emerald-900: #11271C;
  --emerald-950: #081810;

  /* Olive: the curved velvet sofa. Fields and information. */
  --olive-50: #F9F8E6;
  --olive-100: #F0EED5;
  --olive-200: #E1DFB9;
  --olive-300: #CDC995;
  --olive-400: #B1AB68;
  --olive-500: #938C3E;
  --olive-600: #756E27;
  --olive-700: #59541E;
  --olive-800: #403D1B;
  --olive-900: #282719;

  /* Blush: the linen curtains, in pastel pink. The accent: actions, links, care. */
  --blush-50: #FEF4F7;
  --blush-100: #FEE7EE;
  --blush-200: #FCD3DF;
  --blush-300: #F6BBCD;
  --blush-400: #E99BB5;
  --blush-500: #D57B9B;
  --blush-600: #BC5C80;
  --blush-700: #9E4467;
  --blush-800: #77324D;
  --blush-900: #4E2233;
  --blush-950: #32141F;

  /* Ochre: the mustard pillow, softened to butter. A light that is on. */
  --ochre-50: #FFF8E8;
  --ochre-100: #FEF1D0;
  --ochre-200: #FEE4A5;
  --ochre-300: #F6D480;
  --ochre-400: #E1B850;
  --ochre-500: #C0992A;
  --ochre-600: #97750D;
  --ochre-700: #715703;
  --ochre-800: #4F3D09;
  --ochre-900: #32270C;
  --ochre-950: #1C1505;

  /* Lamplight: the amber niches. Glow, the evening action color, and alarms. */
  --lamplight-100: #FEE8DC;
  --lamplight-200: #FFD1B9;
  --lamplight-300: #FEB186;
  --lamplight-400: #EF894C;
  --lamplight-500: #D46407;
  --lamplight-600: #A94E03;
  --lamplight-700: #833B00;
  --lamplight-800: #5E2C09;

  /* Reed: the woven ceiling, rattan, and plywood. Texture only, never text. */
  --reed-50: #FEF5ED;
  --reed-100: #F7EADF;
  --reed-200: #EAD9C8;
  --reed-300: #D9C1AA;
  --reed-400: #BFA285;
  --reed-500: #A28262;
  --reed-600: #82664A;
  --reed-700: #644E38;
  --reed-800: #47392A;

  --lamplight: var(--lamplight-400);
  --cream: #FEFBF2;
  --petal: #FEFCFC;

  /* Type: Fraunces carries the voice; Figtree carries labels and controls. */
  --gr-serif: "Fraunces", "Iowan Old Style", Charter, Georgia, serif;
  --gr-sans: "Figtree", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --gr-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --gr-text-12: 0.75rem;
  --gr-text-14: 0.875rem;
  --gr-text-16: 1rem;
  --gr-text-18: 1.125rem;
  --gr-text-20: 1.25rem;
  --gr-text-24: 1.5rem;
  --gr-text-30: 1.875rem;
  --gr-text-36: 2.25rem;
  --gr-text-48: 3rem;
  --gr-text-60: 3.75rem;
  --gr-text-72: 4.5rem;

  /* Space: base 16, adjacent steps at least 25% apart. */
  --gr-space-4: 0.25rem;
  --gr-space-8: 0.5rem;
  --gr-space-12: 0.75rem;
  --gr-space-16: 1rem;
  --gr-space-24: 1.5rem;
  --gr-space-32: 2rem;
  --gr-space-48: 3rem;
  --gr-space-64: 4rem;
  --gr-space-96: 6rem;
  --gr-space-128: 8rem;

  /* Shape: soft corners everywhere, and the arch from the cream shelf. */
  --gr-radius-sm: 6px;
  --gr-radius-md: 12px;
  --gr-radius-lg: 20px;
  --gr-radius-arch: 999px 999px 20px 20px;
  --gr-radius-pill: 999px;

  /* Motion: slow, eased, never bouncy. */
  --gr-ease: cubic-bezier(.22, .61, .36, 1);
  --gr-ease-soft: cubic-bezier(.45, 0, .2, 1);
  --gr-dur-1: 160ms;
  --gr-dur-2: 280ms;
  --gr-dur-3: 600ms;
  --gr-dur-bloom: 1400ms;

  color-scheme: light dark;
}

:root,
[data-gr-scheme="light"] {
  /* Roles: the room by day, in pastels. Components use these, never the
   * ramps above. The page is the pistachio wall, raised surfaces are petal
   * pink, text is plum ink, and rose from the linen is the color that acts. */
  --gr-page: var(--sage-100);
  --gr-raised: var(--blush-50);
  --gr-sunk: var(--sage-200);
  --gr-field: var(--blush-100);
  --gr-text: var(--marble-900);
  --gr-text-soft: var(--marble-700);
  --gr-text-muted: var(--marble-600);
  --gr-line: var(--sage-300);
  --gr-line-strong: var(--marble-500);
  --gr-accent: var(--blush-700);
  --gr-accent-hover: var(--blush-800);
  --gr-on-accent: var(--petal);
  --gr-link: var(--blush-700);
  --gr-kicker: var(--blush-700);
  --gr-focus: var(--blush-600);
  --gr-ok: var(--emerald-600);
  --gr-warn: var(--ochre-700);
  --gr-bad: var(--lamplight-700);
  --gr-on-bad: var(--petal);
  --gr-info: var(--olive-700);
  --gr-lit: var(--ochre-200);
  --gr-on-lit: var(--marble-900);
  --gr-mark: var(--blush-200);
  --gr-wash-1: var(--blush-200);
  --gr-wash-2: var(--sage-300);
  --gr-wash-3: var(--ochre-100);
  --gr-wash-4: var(--blush-100);
  --gr-glow: var(--blush-300);
  --gr-glow-strength: .30;
  --gr-wash-blend: multiply;
  --gr-wash-opacity: .85;
  --gr-body-weight: 400;
  --gr-heading-weight: 560;
  --gr-tag-ok-bg: var(--emerald-100);
  --gr-tag-warn-bg: var(--ochre-100);
  --gr-tag-bad-bg: var(--lamplight-100);
  --gr-art-filter: none;
  --gr-ink-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5.2C30 3.6 52 6.4 84 4.8S150 3.2 199 5' fill='none' stroke='%23E99BB5' stroke-width='2.4' stroke-linecap='round' opacity='.8'/%3E%3C/svg%3E");

  /* Depth: warm, two-part shadows chosen by elevation. */
  --gr-shadow-1: 0 1px 2px hsla(340, 20%, 18%, .10), 0 1px 3px hsla(340, 20%, 18%, .08);
  --gr-shadow-2: 0 3px 6px hsla(340, 20%, 18%, .10), 0 2px 4px hsla(340, 20%, 18%, .06);
  --gr-shadow-3: 0 10px 20px hsla(340, 20%, 18%, .11), 0 3px 6px hsla(340, 20%, 18%, .05);
  --gr-shadow-4: 0 15px 25px hsla(340, 20%, 18%, .13), 0 5px 10px hsla(340, 20%, 18%, .05);
  --gr-shadow-5: 0 20px 40px hsla(340, 20%, 18%, .17);

  /* Paper: a faint cold-press grain under every page. */
  --gr-paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/*
 * Evening: the garden at dusk. The ground is deep garden green, type is
 * petal cream, and pastel pink becomes the action color. Cards separate
 * with a hairline edge because shadows vanish on dark; art gets a warm halo
 * so dark leaves never disappear into the ground.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-gr-scheme="light"]) {
    --gr-page: #0D1E14;
    --gr-raised: #172A1F;
    --gr-sunk: #07150D;
    --gr-field: #21362A;
    --gr-text: #F9ECEE;
    --gr-text-soft: #DED0D2;
    --gr-text-muted: #BFB0B1;
    --gr-line: #2D3F35;
    --gr-line-strong: #667A6E;
    --gr-accent: var(--blush-300);
    --gr-accent-hover: var(--blush-200);
    --gr-on-accent: var(--marble-950);
    --gr-link: var(--sage-300);
    --gr-kicker: var(--blush-300);
    --gr-focus: var(--blush-300);
    --gr-ok: var(--sage-300);
    --gr-warn: var(--ochre-300);
    --gr-bad: #EC9887;
    --gr-on-bad: var(--marble-950);
    --gr-info: var(--olive-300);
    --gr-lit: var(--ochre-300);
    --gr-on-lit: var(--marble-950);
    --gr-mark: var(--blush-800);
    --gr-wash-1: var(--blush-800);
    --gr-wash-2: var(--emerald-800);
    --gr-wash-3: var(--ochre-800);
    --gr-wash-4: var(--blush-900);
    --gr-glow: var(--blush-400);
    --gr-wash-blend: normal;
    --gr-wash-opacity: .5;
    --gr-glow-strength: .32;
    --gr-body-weight: 430;
    --gr-heading-weight: 600;
    --gr-tag-ok-bg: var(--emerald-800);
    --gr-tag-warn-bg: #3D2D14;
    --gr-tag-bad-bg: #46271F;
    --gr-art-filter: brightness(1.16) saturate(1.1) drop-shadow(0 0 16px hsla(38, 85%, 70%, .28));
    --gr-ink-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5.2C30 3.6 52 6.4 84 4.8S150 3.2 199 5' fill='none' stroke='%23C5DFA8' stroke-width='2.4' stroke-linecap='round' opacity='.8'/%3E%3C/svg%3E");
    --gr-shadow-1: 0 0 0 1px hsla(45, 40%, 92%, .07), 0 1px 3px hsla(150, 50%, 3%, .5);
    --gr-shadow-2: 0 0 0 1px hsla(45, 40%, 92%, .08), 0 4px 10px hsla(150, 50%, 3%, .5);
    --gr-shadow-3: 0 0 0 1px hsla(45, 40%, 92%, .09), 0 10px 24px hsla(150, 50%, 3%, .55);
    --gr-shadow-4: 0 0 0 1px hsla(45, 40%, 92%, .10), 0 15px 30px hsla(150, 50%, 3%, .6);
    --gr-shadow-5: 0 0 0 1px hsla(45, 40%, 92%, .10), 0 20px 44px hsla(150, 50%, 3%, .65);
    --gr-paper-grain: none;
  }
}
[data-gr-scheme="dark"] {
  --gr-page: #0D1E14;
  --gr-raised: #172A1F;
  --gr-sunk: #07150D;
  --gr-field: #21362A;
  --gr-text: #F9ECEE;
  --gr-text-soft: #DED0D2;
  --gr-text-muted: #BFB0B1;
  --gr-line: #2D3F35;
  --gr-line-strong: #667A6E;
  --gr-accent: var(--blush-300);
  --gr-accent-hover: var(--blush-200);
  --gr-on-accent: var(--marble-950);
  --gr-link: var(--sage-300);
  --gr-kicker: var(--blush-300);
  --gr-focus: var(--blush-300);
  --gr-ok: var(--sage-300);
  --gr-warn: var(--ochre-300);
  --gr-bad: #EC9887;
  --gr-on-bad: var(--marble-950);
  --gr-info: var(--olive-300);
  --gr-lit: var(--ochre-300);
  --gr-on-lit: var(--marble-950);
  --gr-mark: var(--blush-800);
  --gr-wash-1: var(--blush-800);
  --gr-wash-2: var(--emerald-800);
  --gr-wash-3: var(--ochre-800);
  --gr-wash-4: var(--blush-900);
  --gr-glow: var(--blush-400);
  --gr-wash-blend: normal;
  --gr-wash-opacity: .5;
  --gr-glow-strength: .32;
  --gr-body-weight: 430;
  --gr-heading-weight: 600;
  --gr-tag-ok-bg: var(--emerald-800);
  --gr-tag-warn-bg: #3D2D14;
  --gr-tag-bad-bg: #46271F;
  --gr-art-filter: brightness(1.16) saturate(1.1) drop-shadow(0 0 16px hsla(38, 85%, 70%, .28));
  --gr-ink-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5.2C30 3.6 52 6.4 84 4.8S150 3.2 199 5' fill='none' stroke='%23C5DFA8' stroke-width='2.4' stroke-linecap='round' opacity='.8'/%3E%3C/svg%3E");
  --gr-shadow-1: 0 0 0 1px hsla(45, 40%, 92%, .07), 0 1px 3px hsla(150, 50%, 3%, .5);
  --gr-shadow-2: 0 0 0 1px hsla(45, 40%, 92%, .08), 0 4px 10px hsla(150, 50%, 3%, .5);
  --gr-shadow-3: 0 0 0 1px hsla(45, 40%, 92%, .09), 0 10px 24px hsla(150, 50%, 3%, .55);
  --gr-shadow-4: 0 0 0 1px hsla(45, 40%, 92%, .10), 0 15px 30px hsla(150, 50%, 3%, .6);
  --gr-shadow-5: 0 0 0 1px hsla(45, 40%, 92%, .10), 0 20px 44px hsla(150, 50%, 3%, .65);
  --gr-paper-grain: none;
  color-scheme: dark;
}
[data-gr-scheme="light"] { color-scheme: light; }
/* @garden-room-tokens:end */