/*
  direction-e-tokens.css
  Autumn & April brochure site. Sets the [data-direction="e"] CSS custom properties.
  Lifted verbatim from the Option E prototype token file. Token values are unchanged;
  the only edit is to the comments (em-dashes removed for the project house-style guardrail).
*/

[data-direction="e"] {
  /* ---------- Color ---------- */
  --color-bg: #f8f4f2;            /* Warm Bone, page background */
  --color-text: #2a2a2d;          /* Charcoal, body and heading text */
  --color-accent: #a0522d;        /* Autumn Rust, the single warm accent */
  --color-secondary: #d9c9b3;     /* Warm Tan, secondary surface */
  --color-tertiary: #f5efe6;      /* Cream, footer and alternate bands */
  --color-border: #e8e8e1;        /* Warm Gray Border, hairlines */

  --color-button-bg: #2a2a2d;     /* Charcoal primary CTA */
  --color-button-text: #f8f4f2;   /* Bone type on charcoal */
  --color-button-hover: #a0522d;  /* Autumn rust hover */

  --color-footer-bg: #f5efe6;     /* Cream footer */
  --color-footer-text: #2a2a2d;

  /* ---------- Type stack ---------- */
  --font-heading: "Playfair Display", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-nav: "Tenor Sans", Georgia, serif;
  --font-script: "Sacramento", cursive;
  --font-product-title: "Inter", system-ui, sans-serif;

  /* ---------- Type scale ---------- */
  --type-h1-size: 56px;
  --type-h1-mobile-size: 32px;
  --type-h2-size: 36px;
  --type-h2-mobile-size: 26px;
  --type-h3-size: 26px;
  --type-h3-mobile-size: 22px;
  --type-body-size: 16px;
  --type-small-size: 14px;
  --type-button-size: 14px;
  --type-nav-size: 14px;
  --type-product-title-size: 15px;
  --type-price-size: 17px;

  --type-h1-weight: 500;
  --type-h2-weight: 500;
  --type-h3-weight: 500;
  --type-body-weight: 400;
  --type-body-letter-spacing: 0;
  --type-body-line-height: 1.55;
  --type-heading-line-height: 1.1;
  --type-h1-tracking: -0.01em;
  --type-button-tracking: 0.05em;
  --type-nav-tracking: 0.05em;
  --type-nav-weight: 400;

  /* ---------- Spacing ---------- */
  --space-grid-gap: 30px;
  --space-section-vertical: 4rem;
  --space-section-stack: 6.5rem;
  --space-container-gutter: 2.5rem;
  --space-container-gutter-mobile: 1.25rem;

  /* ---------- Radius ---------- */
  --radius-button: 0px;
  --radius-card: 0px;
  --radius-input: 0px;

  /* ---------- Shadow ---------- */
  --shadow-card-rest: none;
  --shadow-card-hover: 0 6px 18px rgba(42, 42, 45, 0.06);

  /* ---------- Motion ---------- */
  --motion-default-duration: 220ms;
  --motion-default-easing: cubic-bezier(0.2, 0, 0, 1);
}