/*
 * Pentony Shoes design tokens.
 * This is the only file that may define colours, type, spacing or motion values.
 * Source of truth: Figma "Pentony - Finals" (v3t1BCblCXNMf7sIWMXd8R), Design System page.
 * Updated 2026-10-26: official brand palette, Playfair Display, Figma type ramp.
 */
:root {
  /* Colour: neutrals */
  --pty-ink:        #1C1917;
  --pty-ink-soft:   #57504B;
  --pty-stone:      #726964;  /* 4.84:1 on paper */
  --pty-line:       #E7DEDA;
  --pty-paper:      #FDF7F2;  /* page background (Ver2.0, 27 Oct); product cutouts on white stand off it */
  --pty-white:      #FFFFFF;

  /* Colour: hero pinks (official brand palette) */
  --pty-rose:       #EA718B;  /* Rose Pink: primary accent, CTAs, links hover */
  --pty-blush:      #F9DCE5;  /* Dusty Pink: selected states, soft panels */
  --pty-shell:      #F7EBF4;  /* Orchid Tint: tinted panels, order summary, drawer footer */

  /* Colour: secondaries (promotional and editorial use only) */
  --pty-merlot:     #6E1F2E;
  --pty-sala:       #D23838;
  --pty-cobalt:     #2D4FA2;
  --pty-sky:        #BBD0E3;
  --pty-velvet:     #1E3A2F;
  --pty-powder:     var(--pty-sky);

  /* Colour: states */
  --pty-error:      #9B3A2E;
  --pty-success:    #4F5D45;
  --pty-scrim:      rgba(28, 25, 23, 0.32);

  /* Type families */
  --pty-font-display: "Playfair Display", "Playfair", Georgia, "Times New Roman", serif;
  --pty-font-ui:      "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Type scale: 16px base, steps 12·14·16·20·24·28·32·40·48·56·64. Line height = size + 4 (display, names), + 6 (body). Nothing under 12, nothing at 18. Set 27 Oct 2026. */
  --pty-text-xs:   0.75rem;   /* 12px floor (fine print only). Caption style is now 16/16 uppercase 0.5px */
  --pty-text-sm:   0.875rem;  /* Body S 14/20 */
  --pty-text-md:   1rem;      /* Body M 16/22, inputs never smaller */
  --pty-text-lg:   1.25rem;   /* Body L 20/26 */
  --pty-text-xl:   1.25rem;   /* 20 */
  --pty-display-sm: 1.25rem;  /* Display S 20/24, desktop 24/28 */
  --pty-display-md: 1.75rem;  /* Display M 28/32, desktop 32/36 */
  --pty-display-lg: 2rem;     /* Display L 32/36, desktop 48/52 */
  --pty-display-xl: 2.5rem;   /* Display XL 40/44, desktop 64/68 */
  --pty-display-tracking: -0.015em;
  --pty-display-weight: 500;  /* Playfair Display Medium */
  --pty-label-tracking: 0.1em;
  --pty-product-tracking: 0.02em;
  --pty-line-tight: 1.2;
  --pty-line-display: calc(1em + 4px);  /* size + 4 */
  --pty-line-body: calc(1em + 6px);     /* size + 6 */

  /* Space */
  --pty-space-1: 4px;
  --pty-space-2: 8px;
  --pty-space-3: 12px;
  --pty-space-4: 16px;
  --pty-space-5: 24px;
  --pty-space-6: 32px;
  --pty-space-7: 48px;
  --pty-space-8: 64px;
  --pty-space-9: 96px;
  --pty-gutter: var(--pty-space-4);
  --pty-max-width: 1440px;

  /* Shape */
  --pty-radius: 0;
  --pty-radius-pill: 999px;
  --pty-border: 1px solid var(--pty-line);
  --pty-focus-ring: 2px solid var(--pty-ink);
  --pty-focus-offset: 2px;

  /* Motion */
  --pty-duration: 240ms;
  --pty-duration-fast: 160ms;
  --pty-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Controls */
  --pty-touch-target: 48px;
  --pty-button-height: 52px;
  --pty-express-height: 48px;
  --pty-icon-stroke: 1.5px;
  --pty-icon-size: 24px;

  /* Layout */
  --pty-header-height: 69px;  /* brand row 68 + hairline */
  --pty-header-brand-height: 68px;
  --pty-header-nav-height: 60px;
  --pty-drawer-width: 440px;
  --pty-z-header: 50;
  --pty-z-menu: 90;
  --pty-z-drawer: 100;
  --pty-z-toast: 110;
}

@media (min-width: 1024px) {
  :root {
    --pty-gutter: var(--pty-space-7);
    --pty-header-height: 165px; /* brand 104 + hairline + nav 60 */
    --pty-header-brand-height: 104px;
    --pty-display-sm: 1.5rem;   /* 24/28 */
    --pty-display-md: 2rem;     /* 32/36 */
    --pty-display-lg: 3rem;     /* 48/52 */
    --pty-display-xl: 4rem;     /* 64/68 */
  }
}