/* ==========================================================================
   AlterSmoke Design Tokens
   Source of truth — extracted from Figma (TIZjsWyaJBNWOSahY7I7Zy)
   Generated: 2026-04-07
   ========================================================================== */

:root {
  /* ── Colors ───────────────────────────────────────────────────────────── */
  --as-amaranth: #E62249;
  --as-papaya: #FFEFD0;
  --as-grey-900: #0F0F0F;
  --as-grey-700: #202020;
  --as-grey-500: #353535;
  --as-grey-300: #777777;
  --as-grey-200: #DDE1E3;
  --as-grey-100: #EDEDF3;
  --as-white: #FFFFFF;
  --as-bg-primary: #08101B;
  --as-trustpilot: #00B67A;
  --as-black: #000000;
  --as-success: #D0FFD9;
  --as-star-yellow: #fdd663;
  --as-grey-050: #eeeeee;

  /* ── Typography — Brockmann ───────────────────────────────────────────── */
  --as-font-family: 'Brockmann', sans-serif;
  --as-fw-medium: 500;
  --as-fw-semibold: 600;
  --as-fw-bold: 700;

  /* ── Type Scale ───────────────────────────────────────────────────────── */
  --as-h1: 32px;              /* lh 1.5, ls -1%  */
  --as-h2: 28px;              /* lh 1.5, ls -3%  */
  --as-big-label: 26px;       /* lh 1.5, ls -3%  */
  --as-label-medium: 20px;    /* lh 1.3, ls -1%  */
  --as-label: 16px;           /* lh 1.5, ls -1%  */
  --as-small-label: 14px;     /* lh 1.5, ls -1%, uppercase */
  --as-small-text: 14px;      /* lh 1.3, ls -1%  */
  --as-card-tag: 15px;        /* lh 1.5, ls -1%  */
  --as-product-title: 36px;   /* lh 1.5, ls -1%  */
  --as-product-subtitle: 18px;/* lh 1.5, ls +2%, uppercase */
  --as-top-banner: 13px;      /* lh 1.5, ls -2%  */

  /* ── Radius ───────────────────────────────────────────────────────────── */
  --as-radius-large: 10px;    /* Megamenus, Search overlay */
  --as-radius-main: 8px;      /* Cards, Big Buttons, Add to Cart */
  --as-radius-small: 3px;     /* Tags, inputs, small buttons */

  /* ── Spacing ──────────────────────────────────────────────────────────── */
  --as-spacing-xs: 4px;
  --as-spacing-sm: 8px;
  --as-spacing-md: 16px;
  --as-spacing-md-plus: 24px;
  --as-spacing-lg: 32px;
  --as-spacing-xl: 64px;

  /* ── Z-index ──────────────────────────────────────────────────────────── */
  --as-z-dropdown: 1100;
  --as-z-header: 300;

  /* ── Effects ──────────────────────────────────────────────────────────── */
  --as-shadow-main: 4px 4px 15px rgba(0, 0, 0, 0.05);
  --as-shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.12);
  --as-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.06);
  --as-gradient-card: linear-gradient(170deg, var(--as-black) 20%, var(--as-grey-700) 86%);

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --as-container-padding: 64px;
  --as-nav-height-banner: 40px;
  --as-nav-height-main: 80px;
  --as-card-image-height: 300px;
  --as-sidebar-width: 250px;

  /* Homepage container — fluid 345 → 2400 viewport range (Lot D V1).
     Figma reference renders at ~1500px viewport. Pattern: content width
     scales with viewport, capped at 1900px on ultra-wide. Side padding
     scales with viewport too (16 → 64). Apply as:
       .home-container { width: var(--as-container-home-width);
                          padding-inline: var(--as-container-home-pad);
                          margin-inline: auto; }
     345vp → ~313px inner / 1500vp → ~1400 / 1920vp → ~1790 / 2400vp → 1900 cap */
  --as-container-home-pad: clamp(16px, 3.5vw, 64px);
  --as-container-home-width: min(100%, 1900px);
  --as-container-home-max: 1900px;
  --as-card-grid-gap: clamp(16px, 2.2vw, 32px);

  /* ── Focus / a11y (Lot 7-1, FRM-001) ──────────────────────────────────── */
  --as-focus-ring: 2px solid var(--as-amaranth);
  --as-focus-offset: 2px;

  /* ── Lot B — UI normalization tokens ──────────────────────────────────── */

  /* Semantic colors (alongside existing as-success / as-trustpilot) */
  --as-danger: #DC2626;
  --as-danger-bg: #FEE2E2;
  --as-warning: #D97706;
  --as-warning-bg: #FEF3C7;
  --as-info: #2563EB;
  --as-info-bg: #DBEAFE;
  --as-success-fg: #166534;

  /* Amaranth interactive states */
  --as-amaranth-hover: #C71D40;
  --as-amaranth-active: #A8163A;
  --as-amaranth-soft: #FCE5EB;

  /* Grey interactive states */
  --as-grey-hover: #595959;
  --as-grey-border: #CCCCCC;

  /* Z-index scale (alongside existing as-z-dropdown / as-z-header) */
  --as-z-scrim: 1200;
  --as-z-modal: 1300;
  --as-z-drawer: 1400;
  --as-z-toast: 1500;
  --as-z-tooltip: 1600;

  /* Backdrop / scrim opacity */
  --as-scrim-bg: rgba(15, 15, 15, 0.55);

  /* Component sizing */
  --as-btn-height-sm: 32px;
  --as-btn-height-md: 44px;
  --as-btn-height-lg: 56px;
  --as-btn-padding-x-sm: 12px;
  --as-btn-padding-x-md: 20px;
  --as-btn-padding-x-lg: 32px;

  /* Transitions */
  --as-transition-fast: 120ms ease;
  --as-transition-base: 180ms ease;
  --as-transition-slow: 240ms ease;

  /* ── Lot B partie 2 — cards & form fields ─────────────────────────────── */

  /* Form sizing (mirrors button sizes to keep field+button rows aligned) */
  --as-input-height-sm: 32px;
  --as-input-height-md: 44px;
  --as-input-height-lg: 56px;
  --as-input-padding-x: 12px;
  --as-input-padding-y-sm: 6px;
  --as-input-padding-y-md: 10px;
  --as-input-padding-y-lg: 14px;
  --as-input-border-width: 1px;
  --as-input-border-color: var(--as-grey-border);
  --as-input-border-color-hover: var(--as-grey-500);
  --as-input-border-color-focus: var(--as-amaranth);
  --as-input-bg: var(--as-white);
  --as-input-bg-disabled: var(--as-grey-100);
  --as-input-radius: var(--as-radius-small);
  --as-input-textarea-min-height: 96px;

  /* Card padding scale */
  --as-card-padding-sm: var(--as-spacing-sm);
  --as-card-padding-md: var(--as-spacing-md);
  --as-card-padding-lg: var(--as-spacing-md-plus);
  --as-card-gap: var(--as-spacing-sm);
  --as-card-bg: var(--as-white);
  --as-card-border: 1px solid var(--as-grey-200);

  /* ── Lot B partie 3 — overlay components ──────────────────────────────── */

  /* Modal sizing */
  --as-modal-width-sm: 400px;
  --as-modal-width-md: 560px;
  --as-modal-width-lg: 800px;
  --as-modal-max-height: calc(100vh - 64px);
  --as-modal-padding: var(--as-spacing-md-plus);
  --as-modal-gap: var(--as-spacing-md);

  /* Drawer sizing */
  --as-drawer-width-sm: 320px;
  --as-drawer-width-md: 420px;
  --as-drawer-width-lg: 560px;
  --as-drawer-bottom-max-height: 80vh;
  --as-drawer-padding: var(--as-spacing-md);

  /* Toast sizing */
  --as-toast-width: 360px;
  --as-toast-padding: var(--as-spacing-md);
  --as-toast-gap: var(--as-spacing-sm);
  --as-toast-offset: var(--as-spacing-md-plus);

  /* Alert sizing */
  --as-alert-padding-y: var(--as-spacing-sm);
  --as-alert-padding-x: var(--as-spacing-md);
  --as-alert-radius: var(--as-radius-small);
  --as-alert-gap: var(--as-spacing-sm);

  /* ── Lot B partie 4 — badges / ratings / breadcrumbs / tabs / misc ────── */

  /* Badge sizing */
  --as-badge-height-sm: 18px;
  --as-badge-height-md: 24px;
  --as-badge-height-lg: 32px;
  --as-badge-padding-x-sm: 6px;
  --as-badge-padding-x-md: 8px;
  --as-badge-padding-x-lg: 12px;
  --as-badge-radius-pill: 999px;

  /* Rating */
  --as-rating-size-sm: 12px;
  --as-rating-size-md: 16px;
  --as-rating-size-lg: 24px;
  --as-rating-gap: 2px;
  --as-rating-color: var(--as-star-yellow);
  --as-rating-empty: var(--as-grey-200);

  /* Breadcrumb */
  --as-breadcrumb-gap: var(--as-spacing-sm);
  --as-breadcrumb-separator-color: var(--as-grey-300);

  /* Tabs */
  --as-tabs-indicator-height: 2px;
  --as-tabs-padding-y: var(--as-spacing-sm);
  --as-tabs-padding-x: var(--as-spacing-md);

  /* Map pin (altershops storefinder) */
  --as-mappin-size: 32px;
  --as-mappin-color: var(--as-amaranth);
  --as-mappin-color-hover: var(--as-amaranth-hover);

  /* Tooltip */
  --as-tooltip-bg: var(--as-grey-900);
  --as-tooltip-color: var(--as-white);
  --as-tooltip-padding-y: 6px;
  --as-tooltip-padding-x: 10px;

  /* Divider */
  --as-divider-color: var(--as-grey-200);
}