/* redesign-tokens.css — Track A (Zyentora-branded surfaces only).
   Homepage, catalog + its modal, reseller dashboard.

   NOT loaded on store.html / product.html: reseller storefronts stay
   white-labeled and keep variables.css + themes.css with the reseller's
   own theme. See zyentora-redesign-docs/design-system.md "Two styling tracks".

   Deliberately a separate file from variables.css. Editing variables.css
   would restyle all 18 pages at once, including the admin dashboard and
   every out-of-scope page.

   Mobile-first: the bare :root block is the phone. Breakpoints scale UP.
   Most Zyentora customers and resellers are on phones, so the phone values
   are the real defaults, not a fallback. */

:root {
  /* ---- Color. Values locked by color-system.md; do not invent new ones. ---- */
  --color-background:     #F6F3EE;  /* warm ivory — page background, never white */
  --color-surface:        #FFFFFF;  /* cards, inputs, elevated panels */
  --color-dark-band:      #111111;  /* "Why Zyentora" section ONLY, once per page */

  --color-text-primary:   #171717;
  --color-text-secondary: #6B6B6B;
  --color-text-on-dark:   #FFFFFF;

  --color-border:         #E7E1D8;  /* 1px, never darker — the low contrast is intentional */

  /* Bronze is the only accent. No purple, no blue, no gradients. */
  --color-accent:         #B56A2D;  /* icons, borders, large display text, dark-text badges */
  --color-accent-dark:    #8A4C1D;  /* REQUIRED for any white text on a solid accent fill */

  --color-success:        #2F7D4B;
  --color-success-dark:   #24603A;  /* success text on a success tint — the base is 4.32:1, just under AA */
  --color-warning:        #C58B1B;  /* icon fills and background tints ONLY — 2.96:1, fails AA */
  --color-warning-text:   #96650F;  /* use this for warning TEXT — 5.04:1, passes AA */
  --color-error:          #B84A3A;

  /* Accent at low opacity, for badge/tint backgrounds that carry dark text. */
  --color-accent-tint:    rgba(181, 106, 45, 0.10);

  /* ---- Type ---- */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Mobile scale. 16px body is a hard floor — never go below it at any width. */
  --type-hero:    40px;
  --type-section: 28px;
  --type-card:    20px;
  --type-body:    16px;
  --type-small:   15px;          /* metadata only. Reading text uses --type-body,
                                    never this -- 14px body copy on a phone was the
                                    single biggest legibility complaint. */
  --type-label:   13px;          /* 12px per typography.md, raised one step: at 12px
                                    uppercase with tracking, eyebrow labels read as
                                    too small on a phone. */

  /* Line height is NOT one number. typography.md specifies 145% everywhere,
     which is right for body text and far too loose for display type -- a 72px
     serif at 1.45 leaves 104px between baselines, which is exactly what makes
     large headings read as airy rather than premium. Three values instead: */
  --leading-display: 1.06;       /* hero -- tight, so the two lines read as one block */
  --leading-heading: 1.18;       /* section titles and card titles */
  --leading-body: 1.55;          /* body copy; slightly looser than 145% suits Inter */
  --leading: var(--leading-body); /* back-compat for anything still referencing it */

  --tracking-hero: -0.025em;     /* tighter than the doc's -0.015em; at display size the
                                    default gaps read as loose, not considered */
  --tracking-heading: -0.01em;
  --tracking-label: 0.06em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;

  /* ---- Spacing: 8pt scale. Every margin/padding/gap uses one of these. ---- */
  --space-xs:  8px;
  --space-s:   16px;
  --space-m:   24px;
  --space-l:   40px;
  --space-xl:  64px;
  --space-xxl: 96px;

  /* Section rhythm: 64px on mobile, 96px from tablet up. 96px on a phone
     pushes content too far apart relative to viewport height. */
  --section-pad: var(--space-xl);

  --container-max: 1240px;
  --container-margin: 20px;

  /* ---- Radius ---- */
  --radius-button: 10px;
  --radius-input:  10px;
  --radius-card:   14px;
  --radius-image:  16px;
  --radius-pill:   999px;

  /* ---- Elevation. Exactly two levels exist. Nothing stronger, anywhere. ---- */
  --shadow-1: 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-2: 0 12px 28px rgba(0, 0, 0, 0.08);

  /* ---- Motion: 150–250ms, default 200ms. ---- */
  --motion-fast: 150ms;
  --motion-base: 200ms;
  --motion-slow: 250ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Controls. 52px clears the 44px minimum touch target comfortably. ---- */
  --control-height: 52px;

  /* Cover box. Measured 2026-08-26: real covers are 1536px wide, heights
     2304–2405, so ratios run 0.639–0.667.

     2:3 (0.667) rather than the live 3:4 (0.75). The CHANGELOG entry of
     2026-08-23 measured this exact tradeoff and left it as Lakshay's call:
     against a 3:4 box these covers get cropped a median 12.9% (worst 18.4%);
     against 2:3 that drops to roughly 2%. Same fill behaviour, far less of
     the artwork lost. Revert this one value to `3 / 4` to match live exactly. */
  --cover-ratio: 2 / 3;
  --cover-mat: linear-gradient(165deg, rgba(23, 23, 23, 0.05), rgba(23, 23, 23, 0.015) 60%);
}

/* ---- Tablet ---- */
@media (min-width: 640px) {
  :root {
    --type-hero:    52px;
    --type-section: 34px;
    --type-card:    22px;
    --type-body:    17px;
    --section-pad: var(--space-xxl);
    --container-margin: 40px;
  }
}

/* ---- Desktop ---- */
@media (min-width: 1024px) {
  :root {
    --type-hero:    72px;
    --type-section: 42px;
    --container-margin: 64px;
  }
}