/*
  Atelier design system 1.0.0 tokens.
  Every custom property starts with --at-. Light is the default; dark follows the visitor's system
  setting unless <html data-theme="light|dark"> overrides it. Accent presets switch with
  <html data-accent="rust|ocean"> and change accent and button tokens only: the accent is the
  owner's color and is expected to change. Text pairs target 7:1 and never fall below 4.5:1.
  Measured values live in DESIGN.md section 4.
*/

:root {
  color-scheme: light;

  /* Bone and ink */
  --at-bone: #f1ece2;             /* page canvas: bone, warm and slightly gray */
  --at-surface: #f9f6f0;          /* cards, inputs, dialogs: a lighter sheet laid on the bone */
  --at-bone-2: #e6e0d3;           /* tint bands, wells behind compositions, skeletons, table heads */
  --at-ink: #1c1a16;              /* the name, headings, strong labels, input text */
  --at-body: #2c2924;             /* running text */
  --at-muted: #4b453d;            /* warm gray metadata: years, client types, captions, hints */
  --at-line: #d8d0c1;             /* hairlines: index rows, card edges, dividers */
  --at-line-strong: #bdb3a2;      /* the index head rule and drawn marks (decorative) */
  --at-control: #857b6d;          /* borders that mark a control: inputs, checkboxes, switches */

  /* The owner's color: moss by default. Links, the italic name word, the primary pill */
  --at-accent: #314d26;
  --at-link: #314d26;
  --at-accent-soft: #dce4cc;
  --at-accent-ink: #f6f3ec;
  --at-btn: #314d26;
  --at-btn-hover: #23391b;
  --at-btn-ink: #f6f3ec;
  --at-focus: #314d26;

  /* Inverse panels (booking, the featured plan, toasts): off-black in light, raised warm in dark */
  --at-inverse: #1c1a16;
  --at-inverse-ink: #f1ece2;
  --at-inverse-muted: #c2b9a9;
  --at-inverse-line: #3a362f;
  --at-inverse-btn: #b5cb92;
  --at-inverse-btn-hover: #cadbab;
  --at-inverse-btn-ink: #161512;

  /* Preset previews for the accent switcher (fixed, not themed) */
  --at-swatch-moss: #314d26;
  --at-swatch-rust: #783013;
  --at-swatch-ocean: #1b4a61;

  /* Status. --at-live is the availability dot */
  --at-ok: #285f34;
  --at-ok-soft: #dde9d8;
  --at-warn: #704606;
  --at-warn-soft: #f2e3c6;
  --at-danger: #982c19;
  --at-danger-soft: #f4ddd5;
  --at-live: #2f7a40;
  --at-live-ring: rgba(47, 122, 64, 0.32);
  --at-overlay: rgba(28, 26, 22, 0.5);

  /* Data viz: categorical (3:1 or better on bone, surface and bone-2; lightness alternates) */
  --at-viz-1: #3b5a2b;
  --at-viz-2: #a8730f;
  --at-viz-3: #23597d;
  --at-viz-4: #c0562b;
  --at-viz-5: #3a332b;
  --at-viz-6: #3f8574;
  /* Sequential (moss, light to dark) and diverging (ocean, bone, rust) */
  --at-seq-1: #dfe6d2;
  --at-seq-2: #b4c79a;
  --at-seq-3: #84a065;
  --at-seq-4: #557638;
  --at-seq-5: #2f4620;
  --at-div-1: #23597d;
  --at-div-2: #8db3cc;
  --at-div-3: #e6e0d3;
  --at-div-4: #dc9c7d;
  --at-div-5: #a8441a;

  /* Type faces: Instrument Serif for the name and headings only, Funnel Sans for everything else */
  --at-font-display: "Instrument Serif", ui-serif, serif;
  --at-font-sans: "Funnel Sans", ui-sans-serif, system-ui, sans-serif;
  --at-font-mono: ui-monospace, Consolas, "Liberation Mono", monospace;

  /* Type ladder. The masthead name is sized by its container, see --at-name-fit */
  --at-fs-name-max: 21rem;                                     /* 336px cap for the masthead name */
  --at-name-fit: 4.15;                                         /* name width in em: "Noor Ellison" */
  --at-name-fit-stack: 2.4;                                    /* longest word in em, stacked on phones */
  --at-fs-display: clamp(3.75rem, 0.6rem + 11.5vw, 11rem);     /* 60 to 176px: page titles (h1) */
  --at-fs-title: clamp(2.5rem, 1.55rem + 3.6vw, 4.75rem);      /* 40 to 76px: section titles (h2) */
  --at-fs-headline: clamp(1.875rem, 1.5rem + 1.4vw, 2.75rem);  /* 30 to 44px: case titles, big h3 */
  --at-fs-card: clamp(1.625rem, 1.45rem + 0.6vw, 2rem);        /* 26 to 32px: card and row titles */
  --at-fs-quote: clamp(1.625rem, 1.3rem + 1.3vw, 2.375rem);    /* 26 to 38px: notes from collaborators */
  --at-fs-price: clamp(2.75rem, 2rem + 3vw, 4.5rem);           /* 44 to 72px: plan prices, stats */
  --at-fs-lede: clamp(1.1875rem, 1.08rem + 0.45vw, 1.4375rem); /* 19 to 23px: role line, intros */
  --at-fs-read: clamp(1.125rem, 1.08rem + 0.2vw, 1.1875rem);   /* 18 to 19px: article text */
  --at-fs-body: 1.0625rem;                                     /* 17px: running text */
  --at-fs-sub: 1.125rem;                                       /* 18px: small headings in Funnel Sans */
  --at-fs-ui: 0.9375rem;                                       /* 15px: nav, buttons, labels */
  --at-fs-meta: 0.875rem;                                      /* 14px: years, client types, hints */
  --at-fs-small: 0.8125rem;                                    /* 13px: badges, captions, table heads */

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

  --at-lh-name: 0.84;
  --at-lh-display: 0.92;
  --at-lh-title: 1;
  --at-lh-heading: 1.08;
  --at-lh-body: 1.6;
  --at-lh-read: 1.7;
  --at-lh-ui: 1.35;

  --at-track-name: -0.02em;
  --at-track-display: -0.018em;
  --at-track-title: -0.01em;
  --at-track-caps: 0.06em;

  /* Space: 4px base */
  --at-space-1: 4px;
  --at-space-2: 8px;
  --at-space-3: 12px;
  --at-space-4: 16px;
  --at-space-5: 24px;
  --at-space-6: 32px;
  --at-space-7: 48px;
  --at-space-8: 64px;
  --at-space-9: 96px;
  --at-space-10: 128px;
  --at-section: clamp(4.5rem, 2.75rem + 7vw, 9rem);            /* 72 to 144px between sections */
  --at-gutter: clamp(1.25rem, 0.5rem + 3.5vw, 3.5rem);         /* 20 to 56px page edges */
  --at-page: 86rem;                                            /* 1376px content width */
  --at-measure: 38rem;                                         /* about 68 characters of article text */
  --at-nav-h: 72px;

  /* Shape: pills for everything you press, 20px for everything that holds content */
  --at-radius-btn: 999px;
  --at-radius-pill: 999px;
  --at-radius-input: 999px;
  --at-radius-tag: 999px;
  --at-radius-card: 20px;
  --at-radius-area: 20px;
  --at-radius-inner: 12px;
  --at-radius-check: 6px;
  --at-line-hair: 1px;

  /* Elevation: only for things that float or lift */
  --at-shadow-float: 0 1px 2px rgba(28, 26, 22, 0.06), 0 18px 44px -22px rgba(28, 26, 22, 0.32);
  --at-shadow-lift: 0 1px 1px rgba(28, 26, 22, 0.04), 0 12px 28px -18px rgba(28, 26, 22, 0.28);

  /* Motion */
  --at-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --at-dur-fast: 150ms;
  --at-dur: 260ms;
  --at-dur-slow: 640ms;
  --at-dur-pulse: 2400ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --at-bone: #161512;
    --at-surface: #1e1c18;
    --at-bone-2: #24221d;
    --at-ink: #efe9dc;
    --at-body: #dcd5c7;
    --at-muted: #c6bdad;
    --at-line: #37332c;
    --at-line-strong: #4e483e;
    --at-control: #827a6d;
    --at-accent: #b5cb92;
    --at-link: #bfd3a0;
    --at-accent-soft: #28321f;
    --at-accent-ink: #161512;
    --at-btn: #b5cb92;
    --at-btn-hover: #cadbab;
    --at-btn-ink: #161512;
    --at-focus: #bfd3a0;
    --at-inverse: #2a2722;
    --at-inverse-ink: #efe9dc;
    --at-inverse-muted: #c4bbab;
    --at-inverse-line: #45403a;
    --at-inverse-btn: #b5cb92;
    --at-inverse-btn-hover: #cadbab;
    --at-inverse-btn-ink: #161512;
    --at-ok: #92d09e;
    --at-ok-soft: #1b2a1e;
    --at-warn: #e5b763;
    --at-warn-soft: #2e2515;
    --at-danger: #f2927d;
    --at-danger-soft: #38201b;
    --at-live: #92d09e;
    --at-live-ring: rgba(146, 208, 158, 0.3);
    --at-overlay: rgba(8, 7, 6, 0.68);
    --at-viz-1: #a9c285;
    --at-viz-2: #c8902c;
    --at-viz-3: #8cc0e0;
    --at-viz-4: #d9774c;
    --at-viz-5: #d8cfbf;
    --at-viz-6: #4fa08c;
    --at-seq-1: #26301f;
    --at-seq-2: #3f5530;
    --at-seq-3: #5f7c45;
    --at-seq-4: #8eaa6c;
    --at-seq-5: #c3d6a6;
    --at-div-1: #8cc0e0;
    --at-div-2: #3e6a86;
    --at-div-3: #34302a;
    --at-div-4: #8a4b31;
    --at-div-5: #e39a74;
    --at-shadow-float: 0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 48px -18px rgba(0, 0, 0, 0.72);
    --at-shadow-lift: 0 1px 1px rgba(0, 0, 0, 0.3), 0 14px 30px -16px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --at-bone: #161512;
  --at-surface: #1e1c18;
  --at-bone-2: #24221d;
  --at-ink: #efe9dc;
  --at-body: #dcd5c7;
  --at-muted: #c6bdad;
  --at-line: #37332c;
  --at-line-strong: #4e483e;
  --at-control: #827a6d;
  --at-accent: #b5cb92;
  --at-link: #bfd3a0;
  --at-accent-soft: #28321f;
  --at-accent-ink: #161512;
  --at-btn: #b5cb92;
  --at-btn-hover: #cadbab;
  --at-btn-ink: #161512;
  --at-focus: #bfd3a0;
  --at-inverse: #2a2722;
  --at-inverse-ink: #efe9dc;
  --at-inverse-muted: #c4bbab;
  --at-inverse-line: #45403a;
  --at-inverse-btn: #b5cb92;
  --at-inverse-btn-hover: #cadbab;
  --at-inverse-btn-ink: #161512;
  --at-ok: #92d09e;
  --at-ok-soft: #1b2a1e;
  --at-warn: #e5b763;
  --at-warn-soft: #2e2515;
  --at-danger: #f2927d;
  --at-danger-soft: #38201b;
  --at-live: #92d09e;
  --at-live-ring: rgba(146, 208, 158, 0.3);
  --at-overlay: rgba(8, 7, 6, 0.68);
  --at-viz-1: #a9c285;
  --at-viz-2: #c8902c;
  --at-viz-3: #8cc0e0;
  --at-viz-4: #d9774c;
  --at-viz-5: #d8cfbf;
  --at-viz-6: #4fa08c;
  --at-seq-1: #26301f;
  --at-seq-2: #3f5530;
  --at-seq-3: #5f7c45;
  --at-seq-4: #8eaa6c;
  --at-seq-5: #c3d6a6;
  --at-div-1: #8cc0e0;
  --at-div-2: #3e6a86;
  --at-div-3: #34302a;
  --at-div-4: #8a4b31;
  --at-div-5: #e39a74;
  --at-shadow-float: 0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 48px -18px rgba(0, 0, 0, 0.72);
  --at-shadow-lift: 0 1px 1px rgba(0, 0, 0, 0.3), 0 14px 30px -16px rgba(0, 0, 0, 0.6);
}

/* Accent preset: rust (a burnt clay for links, the italic word and the primary pill) */
:root[data-accent="rust"] {
  --at-accent: #783013;
  --at-link: #783013;
  --at-accent-soft: #f1ddd2;
  --at-accent-ink: #f6f3ec;
  --at-btn: #783013;
  --at-btn-hover: #632810;
  --at-btn-ink: #f6f3ec;
  --at-focus: #783013;
  --at-inverse-btn: #f0ad8d;
  --at-inverse-btn-hover: #f6c5ab;
  --at-inverse-btn-ink: #161512;
}

@media (prefers-color-scheme: dark) {
  :root[data-accent="rust"]:not([data-theme="light"]) {
    --at-accent: #eca07c;
    --at-link: #f0ad8d;
    --at-accent-soft: #3a251c;
    --at-accent-ink: #161512;
    --at-btn: #eca07c;
    --at-btn-hover: #f3bb9e;
    --at-btn-ink: #161512;
    --at-focus: #f0ad8d;
    --at-inverse-btn: #f0ad8d;
    --at-inverse-btn-hover: #f6c5ab;
    --at-inverse-btn-ink: #161512;
  }
}

:root[data-accent="rust"][data-theme="dark"] {
  --at-accent: #eca07c;
  --at-link: #f0ad8d;
  --at-accent-soft: #3a251c;
  --at-accent-ink: #161512;
  --at-btn: #eca07c;
  --at-btn-hover: #f3bb9e;
  --at-btn-ink: #161512;
  --at-focus: #f0ad8d;
  --at-inverse-btn: #f0ad8d;
  --at-inverse-btn-hover: #f6c5ab;
  --at-inverse-btn-ink: #161512;
}

/* Accent preset: ocean (a deep sea blue-green for links, the italic word and the primary pill) */
:root[data-accent="ocean"] {
  --at-accent: #1b4a61;
  --at-link: #1b4a61;
  --at-accent-soft: #d7e5ea;
  --at-accent-ink: #f6f3ec;
  --at-btn: #1b4a61;
  --at-btn-hover: #133748;
  --at-btn-ink: #f6f3ec;
  --at-focus: #1b4a61;
  --at-inverse-btn: #9fd0e3;
  --at-inverse-btn-hover: #bde0ee;
  --at-inverse-btn-ink: #161512;
}

@media (prefers-color-scheme: dark) {
  :root[data-accent="ocean"]:not([data-theme="light"]) {
    --at-accent: #8cc3d9;
    --at-link: #9fd0e3;
    --at-accent-soft: #1b2b33;
    --at-accent-ink: #161512;
    --at-btn: #8cc3d9;
    --at-btn-hover: #aad4e5;
    --at-btn-ink: #161512;
    --at-focus: #9fd0e3;
    --at-inverse-btn: #9fd0e3;
    --at-inverse-btn-hover: #bde0ee;
    --at-inverse-btn-ink: #161512;
  }
}

:root[data-accent="ocean"][data-theme="dark"] {
  --at-accent: #8cc3d9;
  --at-link: #9fd0e3;
  --at-accent-soft: #1b2b33;
  --at-accent-ink: #161512;
  --at-btn: #8cc3d9;
  --at-btn-hover: #aad4e5;
  --at-btn-ink: #161512;
  --at-focus: #9fd0e3;
  --at-inverse-btn: #9fd0e3;
  --at-inverse-btn-hover: #bde0ee;
  --at-inverse-btn-ink: #161512;
}