/* Tulsi’s · shared design tokens.
 * One golden amber for logo, display text, buttons and accents.
 * Breakpoints stay literal in styles.css: CSS variables cannot be used in media queries. */
:root {
  --color-paper: oklch(98% 0.014 85);
  --color-surface: oklch(99% 0.008 85);
  --color-cream: oklch(95.133% 0.0288 77.548);
  --color-badge-border: oklch(93.509% 0.04681 80.802);
  --color-badge-label: oklch(30% 0.04 48);
  --color-ink: oklch(35% 0.018 250);
  --color-heading: oklch(40.008% 0.04739 48.281);
  --color-muted: oklch(47% 0.018 250);
  --color-accent: oklch(0.71 0.15 62.88);
  --color-accent-ink: #fff;
  --color-script-shadow: oklch(25% 0.04 220 / .4);
  --color-shadow: oklch(30% 0.025 65 / .13);
  --color-soft-shadow: oklch(30% 0.025 65 / .07);
  --color-crop-border: oklch(99% 0.006 85);
  --color-hero-haze: oklch(86% 0.03 210 / .65);
  --color-blue: oklch(86.111% 0.05612 210.44);
  --color-green: oklch(49% 0.064 143);
  --color-rule: oklch(86% 0.032 72);
  --color-focus: oklch(37% 0.08 205);
  --color-error: oklch(45% 0.17 28);
  --color-overlay: oklch(22% 0.03 46 / 0.52);
  --color-clear: transparent;

  /* Font families and weights. */
  --font-display: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-script: "Playball", "EB Garamond", cursive;
  --font-body: "DM Sans", "Segoe UI", sans-serif;
  --font-serif-numerals: "Times New Roman", Times, serif;
  --font-sans-numerals: Arial, Helvetica, sans-serif;
  --font-notes-fallback: "Segoe Print", cursive;
  --font-notes: "Oooh Baby", var(--font-notes-fallback);

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Type scales: fixed interface sizes and sizes that follow the composition. */
  --text-tiny: 10px;
  --text-fine: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-ui: 14px;
  --text-copy: 15px;
  --text-base: 16px;
  --text-caption: 17px;
  --text-subtitle-min: 19px;
  --text-lead: 20px;
  --text-note-sm: 22px;
  --text-xl: 24px;
  --text-handwritten: 25px;
  --text-subheading: 26px;
  --text-script: 28px;
  --text-category: 29px;
  --text-2xl: 32px;
  --text-dialog-title: 34px;
  --text-3xl: 36px;
  --text-4xl: 42px;
  --text-feature-max: 49px;
  --text-display: 50px;
  --text-fluid-micro: calc(9 * var(--design-unit));
  --text-fluid-tiny: calc(10 * var(--design-unit));
  --text-fluid-fine: calc(11 * var(--design-unit));
  --text-fluid-xs: calc(12 * var(--design-unit));
  --text-fluid-sm: calc(13 * var(--design-unit));
  --text-fluid-ui: calc(14 * var(--design-unit));
  --text-fluid-copy: calc(15 * var(--design-unit));
  --text-fluid-base: calc(16 * var(--design-unit));
  --text-fluid-caption: calc(17 * var(--design-unit));
  --text-fluid-lg: calc(18 * var(--design-unit));
  --text-fluid-note-sm: calc(22 * var(--design-unit));
  --text-fluid-note: calc(23 * var(--design-unit));
  --text-fluid-handwritten: calc(25 * var(--design-unit));
  --text-fluid-script: calc(28 * var(--design-unit));
  --text-fluid-section: calc(30 * var(--design-unit));
  --text-fluid-brand-subtitle: calc(31 * var(--design-unit));
  --text-fluid-3xl: calc(36 * var(--design-unit));
  --text-fluid-feature-title: calc(38 * var(--design-unit));
  --text-heading: clamp(2.5rem, 3.6vw, 3.5rem);
  --text-hero-subtitle: clamp(var(--text-xl), 7.4vw, var(--text-2xl));
  --text-hero-subtitle-tablet: clamp(var(--text-subtitle-min), 3.35vw, var(--text-category));
  --text-section-title: clamp(var(--text-script), 3.2vw, var(--text-4xl));
  --text-occasion-title: clamp(var(--text-dialog-title), 5vw, var(--text-display));
  --text-catering-title: clamp(var(--text-3xl), 4vw, var(--text-feature-max));

  --leading-display: 1.05;
  --leading-tight: 1.1;
  --leading-heading: 1.15;
  --leading-label: 1.2;
  --leading-caption: 1.25;
  --leading-compact: 1.3;
  --leading-product: 1.35;
  --leading-copy: 1.4;
  --leading-body: 1.5;
  --leading-intro: 1.55;
  --leading-ui: 1.6;
  --leading-preview: 1.8;

  /* Spacing scale, with half steps for compact controls. */
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-4-5: 18px;
  --space-5: 20px;
  --space-5-5: 22px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-13: 52px;
  --space-16: 64px;
  --space-18: 72px;

  /* Borders, curves and effects. */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-photo: 9px;
  --radius-photo-fluid: calc(7 * var(--design-unit));
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-circle: 50%;
  --radius-pill: 999px;
  --border-width: 1px;
  --rule-width: 2px;
  --focus-width: 3px;
  --focus-offset: 5px;
  --outline-offset: 4px;
  --stroke-icon: 1.6;
  --stroke-fine: 1.2;
  --stroke-lettering: .012em;
  --stroke-crop: 10;
  --stroke-shadow: 24;
  --opacity-disabled: .55;
  --tracking-brand: .3px;
  --tracking-subtitle: .4px;
  --tracking-title: 1px;
  --tracking-footer: 2px;
  --tracking-eyebrow: 4px;
  --tracking-title-fluid: calc(1 * var(--design-unit));
  --tracking-eyebrow-fluid: calc(3 * var(--design-unit));

  --shadow-photo: 0 3px 12px var(--color-soft-shadow);
  --shadow-dessert: 0 6px 22px var(--color-shadow);
  --shadow-badge: 0 8px 24px var(--color-soft-shadow);
  --shadow-floating: 0 4px 20px var(--color-shadow);
  --shadow-notes: 0 1px 4px var(--color-script-shadow);
  --shadow-branch: -8px 12px 10px var(--color-shadow);
  --shadow-button-hover: 0 3px 10px var(--color-shadow);
  --blur-curve: 12px;
  --blur-branch: calc(3.5 * var(--design-unit));
  --blur-twigs: calc(3 * var(--design-unit));
  --tilt-notes: -12deg;
  --tilt-footer-notes: -9deg;
  --tilt-twig: 20deg;

  /* Layout and component proportions. */
  --composition-width: 1440px;
  --design-unit: clamp(.87890625px, .09765625vw, calc(var(--composition-width) / 1024));
  --content-width: 1328px;
  --measure-occasion: 470px;
  --measure-catering: 420px;
  --measure-dialog: 540px;
  --measure-picker: 300px;
  --size-control: 44px;
  --size-control-large: 48px;
  --size-input: 46px;
  --size-icon: 22px;
  --size-icon-large: 28px;
  --size-icon-small: 17px;
  --size-heart-height: 27px;
  --size-chef-width: 68px;
  --size-twig-width: 33px;
  --size-twig-height: 50px;
  --size-contact-link: 36px;
  --size-textarea-height: 100px;
  --header-height: 64px;
  --brand-width-compact: 140px;
  --brand-width: 160px;
  --brand-width-footer: 190px;
  --heading-rule-width: 30px;
  --occasion-rule-width: 45px;
  --category-divider-inset: calc(48 * var(--design-unit));
  --hero-photo-height-compact: 360px;
  --hero-photo-height: 400px;
  --hero-height-tablet: 470px;
  --hero-logo-width: 285px;
  --hero-note-bottom-compact: 207px;
  --hero-note-bottom: 230px;
  --hero-dessert-rim: 9px;
  --hero-wave-height-compact: 48px;
  --hero-wave-height: 70px;
  --hero-branch-width-tablet: clamp(64px, calc(8vw + max(0px, (100vw - var(--composition-width)) / 4)), 360px);
  --hero-branch-width: clamp(64px, calc(15vw + max(0px, (100vw - var(--composition-width)) / 4)), 360px);
  --badge-size-compact: 150px;
  --badge-size: 156px;
  --badge-rim: 10px;
  --banner-wave-height: 30px;
  --banner-unit: .09765625vw;

  --layer-art: -2;
  --layer-panel: -1;
  --layer-decoration: 2;
  --layer-wave: 3;
  --layer-content: 4;
  --layer-header: 5;
  --layer-picker: 10;
  --layer-skip: 20;

  --image-logo: url("assets/logo.svg");
  --image-monogram-initial: url("assets/monogram-initial.svg");
  --image-twig: url("assets/leaf.svg");
  --image-section-join: url("assets/section-join.svg");
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-press-distance: 1px;
  --dur-short: 180ms;
  --dur-nav: 260ms;
}