/* Vapovor design tokens: the single place where global custom properties are defined.
 * Loaded first on every page (templates/_partials/stylesheets.tpl, normal and error layouts).
 *
 * 1. Canonical tokens: new CSS reads these names.
 * 2. Component tokens with their own namespace (titles, hero, notices).
 * 3. Aliases: the former names (--vvp-ds-*, --vvp-ui-*, --vvp-type-ui, --vvp-confort-*) still read by the
 *    theme and by the modules' CSS settings. They will go away as consumers migrate to the canonical names.
 * 4. Legacy palette of the earlier redesigns, kept with its current values until lot 6 (colours).
 *
 * Contextual overrides stay with their component (e.g. the dark checkout summary redefines --vvp-ds-ink):
 * they must set the name that their consumers read, because an alias is resolved once, on :root.
 * Values of 20/10/2026, unchanged (lot 4 of the style audit). */

/* 1. Canonical tokens */
:root {
  /* Font */
  --vvp-font-ui: "Vapovor Inter", "Vapovor Inter Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Colours: surfaces and text */
  --vvp-color-page: #f5f5f7;
  --vvp-color-surface: #fff;
  --vvp-color-ink: #202124;
  --vvp-color-text-secondary: #62656a;
  --vvp-color-icon: var(--vvp-color-ink);
  --vvp-color-inverse: #fff;
  --vvp-color-inverse-muted: #d3d6db;
  /* Colours: lines and neutral states */
  --vvp-color-line: #dedfe3;
  --vvp-color-panel-line: #e6e9ef;
  --vvp-color-field-line: #cad4e2;   /* light lines and hovers; not a field border */
  --vvp-color-field-border: var(--vvp-color-control); /* field borders: 4:1 on white (lot 5, D1) */
  --vvp-color-control: #7b8088;
  --vvp-color-subtle: #eef0f2;
  --vvp-color-hover: #e8eaed;
  --vvp-color-pressed: #dce0e4;
  --vvp-color-disabled: #eceef0;
  --vvp-color-interaction-bg: var(--vvp-color-subtle);
  --vvp-color-interaction-hover: #e3e7ec;
  /* Colours: brand */
  --vvp-color-action: #263b63;
  --vvp-color-action-hover: #1d2d4b;
  --vvp-color-action-soft: #ecf0f7;
  --vvp-color-accent: #bd3e68;
  --vvp-color-accent-soft: #fceef3;
  --vvp-color-focus: var(--vvp-color-action);
  --vvp-color-focus-ring: rgba(38, 59, 99, .14);
  /* Colours: information and status */
  --vvp-color-info-bg: #f5f7fb;
  --vvp-color-info-line: #dfe6f0;
  --vvp-color-error: #a92443;
  --vvp-color-error-border: var(--vvp-color-error);
  --vvp-color-error-soft: #fff3f5;
  --vvp-color-warning: #865b16;
  --vvp-color-warning-soft: #faf4e7;
  --vvp-color-success: #356b4e;
  --vvp-color-success-soft: #e8f2e9;

  /* Radii */
  --vvp-radius-control: 10px;
  --vvp-radius-info: 12px;
  --vvp-radius-card: 16px;
  --vvp-radius-panel: 18px;
  --vvp-radius-pill: 999px;

  /* Spacing scale (4 px steps) */
  --vvp-space-1: 4px;
  --vvp-space-2: 8px;
  --vvp-space-3: 12px;
  --vvp-space-4: 16px;
  --vvp-space-5: 20px;
  --vvp-space-6: 24px;
  --vvp-space-7: 28px;
  --vvp-space-8: 32px;

  /* Layout and rhythm */
  --vvp-layout-width: 1440px;
  --vvp-layout-gutter: clamp(24px,5.5556vw,80px);
  --vvp-gap-section: clamp(28px,2.5vw,40px);
  --vvp-gap-content: var(--vvp-space-3);
  --vvp-gap-group: clamp(12px,1.3vw,20px);
  --vvp-gap-reading: clamp(44px,4vw,60px);
  --vvp-gap-control: var(--vvp-space-3);
  --vvp-gap-heading: var(--vvp-space-5);
  --vvp-gap-collection: clamp(32px,3.333vw,48px);
  --vvp-gap-action: clamp(24px,2.222vw,32px);
  --vvp-band-space: clamp(48px,4.5vw,72px);
  --vvp-panel-padding: clamp(28px,3.1vw,44px);
  --vvp-card-padding: var(--vvp-space-6);

  /* Controls */
  --vvp-control-height: 48px;
  --vvp-control-height-compact: 44px;
  --vvp-control-weight: 500;
  --vvp-control-font-size: 15px;
  --vvp-control-font-size-compact: 14px;
  --vvp-focus-ring: 0 0 0 3px var(--vvp-color-focus-ring);

  /* Badges (pills): product flags, order statuses */
  --vvp-badge-height: 24px;
  --vvp-badge-padding-x: 10px;
  --vvp-badge-font-size: 12px;
  --vvp-badge-weight: 600;
  --vvp-badge-tracking: .2px;

  /* Shadows */
  --vvp-shadow-raised: 0 4px 16px rgba(32, 33, 36, .12);
  --vvp-shadow-floating: 0 8px 28px rgba(22, 33, 59, .094);

  /* Type scale and weights */
  --vvp-font-size-12: 12px;
  --vvp-font-size-13: 13px;
  --vvp-font-size-14: 14px;
  --vvp-font-size-15: 15px;
  --vvp-font-size-16: 16px;
  --vvp-font-size-20: 20px;
  --vvp-font-size-24: 24px;
  --vvp-font-size-32: 32px;
  --vvp-font-size-40: 40px;
  --vvp-weight-regular: 400;
  --vvp-weight-medium: 500;
  --vvp-weight-semibold: 600;
  --vvp-weight-bold: 700;

  /* Type roles (theme headings and the modules' custom CSS) */
  --vvp-type-heading-color: var(--vvp-color-action);
  --vvp-type-section-size: 24px; --vvp-type-section-line: 31px; --vvp-type-section-weight: 600; --vvp-type-section-tracking: -.3px;
  --vvp-type-card-size: 20px; --vvp-type-card-line: 28px; --vvp-type-card-weight: 600; --vvp-type-card-tracking: -.2px;
  --vvp-type-reading-size: 16px; --vvp-type-reading-line: 28px;
  --vvp-type-product-size: 15px; --vvp-type-product-line: 21px; --vvp-type-product-weight: 600; /* product names: cards, compact rows */
  --vvp-type-subtitle-size: 18px; --vvp-type-subtitle-line: 26px; --vvp-type-subtitle-weight: 600; --vvp-type-subtitle-tracking: -.2px; /* h3 */
  --vvp-type-eyebrow-size: 12px; --vvp-type-eyebrow-line: 18px; --vvp-type-eyebrow-weight: 500; --vvp-type-eyebrow-tracking: .96px; --vvp-type-eyebrow-color: var(--vvp-color-accent);
  /* Split titles (lead + soft part), one pair per role */
  --vvp-type-title-home-lead: 300; --vvp-type-title-home-soft: 100;       /* homepage headline */
  --vvp-type-title-section-lead: 550; --vvp-type-title-section-soft: 300; /* section titles (.vvp-title) */
  --vvp-type-title-hero-lead: 600; --vvp-type-title-hero-soft: 400;       /* page entrance titles (H1) */
}
@media (max-width:767.98px) {
  :root {
    --vvp-layout-gutter: 24px;
    --vvp-gap-heading: var(--vvp-space-4);
    --vvp-panel-padding: var(--vvp-space-7);
    --vvp-card-padding: var(--vvp-space-5);
    --vvp-type-section-size: 22px; --vvp-type-section-line: 28px;
    --vvp-type-card-size: 18px; --vvp-type-card-line: 26px;
    --vvp-type-subtitle-size: 17px; --vvp-type-subtitle-line: 24px;
  }
}

/* 2. Component tokens */
:root {
  /* Split titles read these two; scoped rules switch them to another role. Default: homepage headline. */
  --vvp-ui-title-lead-weight: var(--vvp-type-title-home-lead);
  --vvp-ui-title-soft-weight: var(--vvp-type-title-home-soft);
  /* Page entrance (page-hero.css adapts the spaces to the page purpose) */
  --vvp-hero-blue: var(--vvp-color-action);
  --vvp-hero-muted: var(--vvp-color-inverse-muted);
  --vvp-hero-space-start: 24px;
  --vvp-hero-space-end: 32px;
  /* Storefront notices */
  --vvp-notice-success-bg: var(--vvp-color-success-soft); --vvp-notice-success-line: #bddbc7; --vvp-notice-success-text: var(--vvp-color-success);
  --vvp-notice-error-bg: var(--vvp-color-error-soft); --vvp-notice-error-line: #eec7c7; --vvp-notice-error-text: var(--vvp-color-error);
  --vvp-notice-warning-bg: var(--vvp-color-warning-soft); --vvp-notice-warning-line: #ead49b; --vvp-notice-warning-text: var(--vvp-color-warning);
  --vvp-notice-info-bg: var(--vvp-color-info-bg); --vvp-notice-info-line: #cbd9ed; --vvp-notice-info-text: var(--vvp-color-action);
}

/* 3. Aliases of the former names */
:root {
  /* --vvp-ds-* (theme.css, Figma semantic colours). Note: --vvp-ds-accent meant the action blue,
     --vvp-ds-accentText the raspberry accent. */
  --vvp-ds-page: var(--vvp-color-page);
  --vvp-ds-surface: var(--vvp-color-surface);
  --vvp-ds-ink: var(--vvp-color-ink);
  --vvp-ds-muted: var(--vvp-color-text-secondary);
  --vvp-ds-line: var(--vvp-color-line);
  --vvp-ds-control: var(--vvp-color-control);
  --vvp-ds-subtle: var(--vvp-color-subtle);
  --vvp-ds-action: var(--vvp-color-action);
  --vvp-ds-action-hover: var(--vvp-color-action-hover);
  --vvp-ds-action-soft: var(--vvp-color-action-soft);
  --vvp-ds-accent-soft: var(--vvp-color-accent-soft);
  --vvp-ds-focus-ring: var(--vvp-color-focus-ring);
  --vvp-ds-radius-panel: var(--vvp-radius-panel);
  --vvp-ds-radius-action: var(--vvp-radius-pill);
  --vvp-ds-accent: var(--vvp-color-action);
  --vvp-ds-accentText: var(--vvp-color-accent);
  --vvp-ds-focus: var(--vvp-color-focus);
  --vvp-ds-inverse: var(--vvp-color-inverse);
  --vvp-ds-inverseMuted: var(--vvp-color-inverse-muted);
  --vvp-ds-hover: var(--vvp-color-hover);
  --vvp-ds-pressed: var(--vvp-color-pressed);
  --vvp-ds-disabled: var(--vvp-color-disabled);
  --vvp-ds-error: var(--vvp-color-error);
  --vvp-ds-errorBorder: var(--vvp-color-error-border);
  --vvp-ds-errorSoft: var(--vvp-color-error-soft);
  --vvp-ds-warning: var(--vvp-color-warning);
  --vvp-ds-warningSoft: var(--vvp-color-warning-soft);
  --vvp-ds-success: var(--vvp-color-success);
  --vvp-ds-successSoft: var(--vvp-color-success-soft);
  --vvp-ds-icon: var(--vvp-color-icon);

  /* --vvp-ui-* (vapovor-components.css) */
  --vvp-ui-space-1: var(--vvp-space-1);
  --vvp-ui-space-2: var(--vvp-space-2);
  --vvp-ui-space-3: var(--vvp-space-3);
  --vvp-ui-space-4: var(--vvp-space-4);
  --vvp-ui-space-5: var(--vvp-space-5);
  --vvp-ui-space-6: var(--vvp-space-6);
  --vvp-ui-space-7: var(--vvp-space-7);
  --vvp-ui-space-8: var(--vvp-space-8);
  --vvp-ui-page-width: var(--vvp-layout-width);
  --vvp-ui-page-gutter: var(--vvp-layout-gutter);
  --vvp-ui-section-gap: var(--vvp-gap-section);
  --vvp-ui-content-gap: var(--vvp-gap-content);
  --vvp-ui-group-space: var(--vvp-gap-group);
  --vvp-ui-reading-gap: var(--vvp-gap-reading);
  --vvp-ui-control-gap: var(--vvp-gap-control);
  --vvp-ui-panel-padding: var(--vvp-panel-padding);
  --vvp-ui-panel-bg: var(--vvp-color-surface);
  --vvp-ui-panel-line: var(--vvp-color-panel-line);
  --vvp-ui-card-padding: var(--vvp-card-padding);
  --vvp-ui-heading-gap: var(--vvp-gap-heading);
  --vvp-ui-collection-space: var(--vvp-gap-collection);
  --vvp-ui-action-space: var(--vvp-gap-action);
  --vvp-ui-control-height: var(--vvp-control-height);
  --vvp-ui-control-radius: var(--vvp-radius-control);
  --vvp-ui-info-radius: var(--vvp-radius-info);
  --vvp-ui-control-weight: var(--vvp-control-weight);
  --vvp-ui-info-bg: var(--vvp-color-info-bg);
  --vvp-ui-info-line: var(--vvp-color-info-line);
  --vvp-ui-field-line: var(--vvp-color-field-line);
  --vvp-ui-action-bg: var(--vvp-color-interaction-bg);
  --vvp-ui-action-hover: var(--vvp-color-interaction-hover);
  --vvp-ui-band-space: var(--vvp-band-space);
  --vvp-ui-band-gray: var(--vvp-color-page);

  /* Other former names */
  --vvp-type-ui: var(--vvp-font-ui);
  --vvp-confort-soft: var(--vvp-color-info-bg);
  --vvp-confort-line: var(--vvp-color-info-line);
  --vvp-confort-radius: var(--vvp-radius-panel);
}

/* 4. Legacy palette of the catalog and header redesigns (theme.css): names kept, values mapped to the tokens above (lot 6, 20/10/2026). */
:root {
  --vvp-blue: var(--vvp-color-action);
  --vvp-deep: var(--vvp-color-ink);
  --vvp-gold: var(--vvp-color-accent);
  --vvp-bg: var(--vvp-color-page);
  --vvp-border: rgba(32, 33, 36, .08);
  --vvp-muted: var(--vvp-color-text-secondary);
  --vvp-soft: var(--vvp-color-subtle);
  --vvp-success: var(--vvp-color-success);
  --vvp-container: 1280px;
  --vvp-header-deep: var(--vvp-color-ink);
  --vvp-header-blue: var(--vvp-color-action);
  --vvp-header-gold: var(--vvp-color-accent);
  --vvp-header-border: rgba(32, 33, 36, .08);
  --vvp-header-soft: var(--vvp-color-page);
  --vvp-header-muted: var(--vvp-color-text-secondary);
}