/* ==========================================================================
   DESIGN TOKENS — Printed Gift Solutions
   Edit this file to restyle the whole site. Do not hard-code values elsewhere.
   ========================================================================== */

:root {
  /* ---------- Primitives: palette ---------- */
  --brand-50: #f5f8ee;
  --brand-100: #e7edd4;
  --brand-500: #46904a;
  --brand-600: #3a7a42;
  --brand-700: #2f6a3c;
  --brand-800: #116123;
  --brand-900: #1f4129;

  --accent-300: #f7ec7a;
  --accent-400: #f3e33b;
  --accent-500: #e6d41c;

  --coral-500: #e5432f;
  --coral-600: #c9391f;
  --coral-700: #a82e17;

  --gold-400: #f4b400;
  --lime-50: #eef1cf;

  --neutral-0: #ffffff;
  --neutral-50: #fdfcf8;
  --neutral-100: #f7f5f0;
  --neutral-200: #efebe2;
  --neutral-300: #d6d0c0;
  --neutral-400: #a9a597;
  --neutral-500: #62675f;
  --neutral-700: #2f3437;
  --neutral-900: #1a2b36;

  --white-alpha-80: rgb(255 255 255 / 0.82);
  --black-alpha-04: rgb(0 0 0 / 0.04);
  --black-alpha-06: rgb(0 0 0 / 0.06);
  --black-alpha-09: rgb(0 0 0 / 0.09);

  /* ---------- Semantic: colors ---------- */
  --color-bg: var(--neutral-50);
  --color-bg-alt: var(--neutral-100);
  --color-hero-bg: var(
    --neutral-100
  ); /* hero band, a step darker than --color-bg */
  --color-surface: var(--neutral-0);
  --color-surface-tint: var(--brand-100);
  --color-surface-inverse: var(--brand-800);

  --color-text: var(--neutral-700);
  --color-text-muted: var(--neutral-500);
  --color-text-inverse: var(--neutral-0);
  --color-text-inverse-muted: var(--white-alpha-80);
  --color-heading: var(--neutral-900);
  --color-highlight: var(--brand-500); /* green words in headings */

  --color-primary: var(--brand-700);
  --color-primary-hover: var(--brand-900);
  --color-primary-soft: var(--brand-50);
  --color-on-primary: var(--neutral-0);

  --color-accent: var(--accent-400);
  --color-accent-hover: var(--accent-500);
  --color-on-accent: var(--brand-900);

  --color-link: var(--coral-600);
  --color-link-hover: var(--coral-700);
  --color-sale: var(--coral-600); /* prices, stats, "Most Popular" */
  --color-on-sale: var(--neutral-0);

  --color-rating: var(--gold-400);
  --color-icon-bg: var(--lime-50);
  --color-icon: var(--brand-800);

  --color-border: var(--neutral-200);
  --color-border-strong: var(--neutral-300);
  --color-focus: var(--brand-500);

  --color-success: var(--brand-600);
  --color-warning: var(--accent-500);
  --color-warning-bg: var(--accent-300); /* email-confirmation notice bar */
  --color-on-warning: var(--neutral-900);
  --color-danger: var(--coral-600);

  --color-disabled-bg: var(--neutral-100);
  --color-disabled-text: var(--neutral-400);
  --color-placeholder-bg: var(--neutral-200);
  --color-placeholder-line: var(--neutral-400);

  /* Overlays that keep text readable over background images */
  --overlay-hero: linear-gradient(
    90deg,
    var(--color-hero-bg) 0%,
    var(--color-hero-bg) 30%,
    transparent 45%
  );
  --overlay-tint: linear-gradient(
    90deg,
    var(--color-surface-tint) 0%,
    var(--color-surface-tint) 45%,
    transparent 75%
  );
  --overlay-inverse: linear-gradient(
    90deg,
    var(--color-surface-inverse) 0%,
    var(--color-surface-inverse) 30%,
    color-mix(in srgb, var(--color-surface-inverse) 75%, transparent) 100%
  ); /* stays dark: white text on top */
  --mask-fade-left: linear-gradient(
    90deg,
    transparent 0%,
    black 22%
  ); /* soft left edge on hero image */
  --overlay-hero-cover: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-surface-inverse) 88%, transparent) 0%,
    color-mix(in srgb, var(--color-surface-inverse) 60%, transparent) 40%,
    transparent 70%
  ); /* cover hero: white text on a colorful photo */
  --overlay-hero-cover-sm: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-surface-inverse) 55%, transparent) 0%,
    color-mix(in srgb, var(--color-surface-inverse) 90%, transparent) 100%
  );
  --overlay-stack: linear-gradient(
    180deg,
    var(--color-bg) 0%,
    transparent 100%
  ); /* mobile: image under text */
  --overlay-card: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-surface-inverse) 82%, transparent) 0%,
    color-mix(in srgb, var(--color-surface-inverse) 60%, transparent) 45%,
    color-mix(in srgb, var(--color-surface-inverse) 92%, transparent) 100%
  ); /* image cards: white text over the whole photo (user, 2026-09-28) */

  /* ---------- Typography ---------- */
  /* ONE family for the whole site (single-font-family skill); role tokens are aliases */
  --font-family:
    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: var(--font-family);
  --font-display: var(--font-family);
  --font-body: var(--font-family);
  --font-script: var(--font-family);
  --font-mono: var(--font-family);

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --text-3xl: clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem);
  --text-4xl: clamp(2rem, 1.5rem + 2vw, 3rem);
  --text-5xl: clamp(2.375rem, 1.7rem + 2.6vw, 3.5rem);

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;

  /* Site rule (user, 2026-09-23): NO bold text anywhere on this site.
     Heavier weight tokens are capped at medium; hierarchy comes from size, color and tracking. */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: var(--weight-medium);
  --weight-bold: var(--weight-medium);
  --weight-black: var(--weight-medium);

  --tracking-tight: -0.02em;
  --tracking-wide: 0.05em;

  --measure: 36rem; /* max width for paragraphs next to images */
  --measure-sm: 26rem;
  --measure-hero: 42rem; /* hero text column */

  /* ---------- Spacing (4px base) ---------- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-narrow: 760px;
  --container-gutter: var(--space-4);
  --section-space-scale: 1.25; /* space between sections (user, 2026-09-25: +25%) */
  --title-gap-scale: 1.2; /* gap between a section title and its content (user, 2026-09-25: +20%) */
  --section-padding-y: calc(
    clamp(var(--space-10), 5vw, var(--space-16)) * var(--section-space-scale)
  );
  --grid-gap: var(--space-4);
  --header-height: 72px;
  --header-bg-opacity: 80%; /* sticky header background (user, 2026-09-25) */
  --header-blur: 5px;
  --hero-min-height: clamp(28rem, 52vw, 38rem);
  --hero-media-ratio: 372 / 468; /* hero slide frame (original hero image proportions) */
  --hero-media-width: calc(
    min(100%, var(--container-max)) * 0.52
  ); /* desktop hero image: 52% of the container */
  --banner-min-height: clamp(20rem, 32vw, 24rem);
  --drawer-width: min(22rem, 86vw); /* mobile nav panel */
  --drawer-accent: linear-gradient(
    180deg,
    var(--color-primary-soft) 0%,
    var(--color-surface) 14rem
  );
  --drawer-backdrop: color-mix(in srgb, var(--color-heading) 45%, transparent);
  --cta-img-width: 15rem;
  --logo-height: clamp(2.5rem, 2rem + 1.5vw, 3.25rem);
  --logo-height-footer: 3rem;

  /* ---------- Borders & radii ---------- */
  --border-width: 1px;
  --border-width-thick: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 2px var(--black-alpha-04);
  --shadow-md: 0 3px 10px var(--black-alpha-06);
  --shadow-lg: 0 10px 28px var(--black-alpha-09);
  --shadow-focus: 0 0 0 3px
    color-mix(in srgb, var(--color-focus) 40%, transparent);

  /* ---------- Icons ---------- */
  --icon-sm: 1rem;
  --icon-md: 1.25rem;
  --icon-lg: 1.5rem;
  --icon-xl: 1.75rem;
  --icon-circle: 3.5rem;
  --avatar-sm: 2rem;
  --avatar-md: 2.75rem;
  --order-item-media: calc(var(--space-24) * 1.5); /* order page: line picture / photo column (user, 2026-10-03) */
  --order-item-media-sm: var(--space-20);          /* same, on phones */

  /* ---------- Motion ---------- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 350ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-hero-fade: 1200ms; /* hero slider crossfade (slides advance every 5s in home/script.js) */
  --duration-hero-zoom: 6000ms; /* slow zoom on the active hero slide */
  --hero-zoom-scale: 1.06;
  --duration-reveal: 600ms; /* tab-switch fade (results); scroll reveals are scroll-linked */
  --duration-count: 1200ms;
  --duration-drawer: 380ms; /* mobile nav drawer slide */
  --drawer-stagger: 45ms; /* delay between drawer links */ /* stat count-up, read by home/script.js */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-spin: 800ms; /* busy-button spinner turn; kept with reduced motion (it shows that work is happening) */
  --spinner-size: var(--icon-md);
  --spinner-width: var(--border-width-thick);
  --reveal-shift: var(--space-6); /* distance cards travel while fading in */
  --reveal-scale: 0.6; /* icon pop start size */
  --hover-lift: calc(var(--space-1) * -1);

  /* ---------- Z-index ---------- */
  --z-base: 1;
  --z-raised: 2;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;

  /* ---------- Components ---------- */
  --control-height-sm: 36px;
  --control-height-md: 44px;
  --control-height-lg: 52px;
  --control-padding-x: var(--space-4);
  --control-radius: var(--radius-md);
  --control-border: var(--border-width) solid var(--color-border-strong);

  --btn-radius: var(--control-radius);
  --btn-weight: var(--weight-semibold);
  --input-radius: var(--control-radius);
  --card-radius: var(--radius-lg);
  --card-padding: var(--space-5);
  --card-shadow: var(--shadow-sm);
  --card-border: var(--border-width) solid var(--color-border);
  --banner-radius: var(--radius-xl);
  --image-card-min-height: 26rem; /* image service cards (For Business), room for the photo to show */
  --image-card-zoom: 1.05; /* photo zoom on card hover */
  --tab-indicator: var(--border-width-thick) solid var(--color-accent);

  /* ---------- Photo editor (editor/, user 2026-09-25) ---------- */
  --editor-stage-bg: var(--neutral-900); /* dark stage behind the photo */
  --editor-mask: color-mix(
    in srgb,
    var(--neutral-900) 72%,
    transparent
  ); /* dims the part outside the 1:1 frame */
  --editor-frame-color: var(--neutral-0);
  --editor-guide-color: color-mix(
    in srgb,
    var(--neutral-0) 55%,
    transparent
  ); /* grid, safe area, image outline */
  --editor-handle-size: 12px;
  --editor-frame-ratio: 0.72; /* frame side as a share of the stage's shorter side (read by editor/script.js) */
  --editor-safe-inset: 6%; /* safe-area guide inset */
  --editor-stage-height: clamp(20rem, 62vh, 38rem);
  --editor-panel-width: 22rem;
  --editor-thumb-size: 5.5rem;
  --editor-tint-warm: #ff9a3c; /* warmth overlay (soft-light blend) */
  --editor-tint-cool: #3c8dff;
  --editor-preview-tilt: -3deg; /* magnet preview card */
  --editor-tint-max: 0.55; /* overlay opacity at warmth ±100 (read by editor/script.js) */
}

@media (min-width: 768px) {
  :root {
    --container-gutter: var(--space-6);
    --grid-gap: var(--space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-hero-fade: 0ms;
    --hero-zoom-scale: 1;
    --duration-reveal: 0ms;
    --duration-count: 0ms;
    --duration-drawer: 0ms;
    --drawer-stagger: 0ms;
  }
}