/* ==========================================================================
   ACRÈ Padel — Design Tokens
   Drop this file into any HTML page to get the full brand vocabulary as
   CSS custom properties, plus base element styles for semantic HTML.

   Load order:
     <link rel="stylesheet" href="fonts/fonts.css">
     <link rel="stylesheet" href="colors_and_type.css">
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     COLORS
     -------------------------------------------------------------------------- */

  /* ────────────────────────────────────────────────────────────────────────
     OFFICIAL BRAND PALETTE
     From `assets/brand-package/page-09.svg` — the canonical 8-color system.
     The brief (and the lookbook) emphasized terracotta + cream + ink, but
     the brand package documents a full editorial palette with greens, navy,
     gold, and a dusty blue. These secondary colors are used in modernist
     color-block compositions (pages 10–12) — never as UI accents inside
     a typical product surface.
     ──────────────────────────────────────────────────────────────────────── */

  /* Primary voltage — clay-court red. The brand's main accent. */
  --c-primary:            #8b181a;   /* official scarlet (was #8B2A1F approx) */
  --c-primary-hover:      #b24325;   /* mid rust (was #A8412C approx)         */
  --c-primary-deep:       #5a1e0e;   /* official deep oxblood                 */
  --c-primary-warm:       #812b19;   /* warm rust variant                     */

  /* Secondary palette — editorial color-blocking only (see page 09–12). */
  --c-navy:               #184465;   /* deep editorial navy            */
  --c-navy-soft:          #4960ac;   /* periwinkle / royal blue accent */
  --c-blue-dust:          #b6c6d1;   /* dusty sky blue                 */
  --c-blue-slate:         #89aabb;   /* muted slate blue               */
  --c-green-forest:       #235026;   /* deep forest green              */
  --c-green-mid:          #457c3e;   /* mid editorial green            */
  --c-green-sage:         #a6baae;   /* dusted sage                    */
  --c-green-deep:         #1a3a1b;   /* nearly-black green             */
  --c-gold:               #ecc46a;   /* official mustard gold          */
  --c-gold-soft:          #e6cd9a;   /* sandy gold                     */

  /* Editorial gold — kept for backwards compatibility with the lookbook
     finding. Equivalent to --c-gold for new work. */
  --c-gold-legacy:        #D9A93A;   /* deprecated — use --c-gold      */
  --c-gold-soft-legacy:   #E6BC57;

  /* Ink — slightly warmer than I had previously; matches official #231f20 */
  --c-ink:                #231f20;   /* default text on cream  (was #1A1410) */
  --c-ink-deep:           #1A1410;   /* even-darker ink, kept for compat     */
  --c-ink-on-dark:        #EFE9D6;   /* "cream" text on dark editorial */
  --c-body:               #231f20;
  --c-body-on-dark:       #EFE9D6;
  --c-body-muted:         #5B5A3A;
  --c-body-soft-on-dark:  rgba(239, 233, 214, 0.6);

  /* Canvas — official cream is #eae1db (slightly warmer than my earlier #F8F4EA) */
  --c-canvas:             #eae1db;   /* official cream (was #F8F4EA)         */
  --c-canvas-warm:        #F8F4EA;   /* the warmer off-white I had — kept as alt */
  --c-canvas-cream:       #EFE9D6;   /* lift surface                          */
  --c-canvas-cream-light: #F3EDD8;   /* lightest cream                        */
  --c-canvas-dark:        #231f20;   /* warm editorial ink                    */

  /* Surface aliases */
  --c-surface-card-light: #EFE9D6;
  --c-surface-card-dark:  #1A1410;
  --c-white:              #ffffff;   /* used ONLY inside default time-slots */

  /* Hairlines */
  --c-hairline-on-light:  rgba(26, 20, 16, 0.1);
  --c-hairline-on-dark:   rgba(239, 233, 214, 0.1);
  --c-hairline-soft:      rgba(26, 20, 16, 0.05);

  /* Script accent */
  --c-accent-script:         #8B2A1F;
  --c-accent-script-on-dark: #A8412C;

  /* On-primary (text inside terracotta fills) */
  --c-on-primary:         #EFE9D6;

  /* Selection */
  --c-selection-bg:       #A8412C;
  --c-selection-fg:       #EFE9D6;

  /* --------------------------------------------------------------------------
     TYPE FAMILIES
     The real brand specifies STIXGeneral-Regular (display) + GeographicaScript
     (script). STIX Two Text on Google Fonts is the same family as STIXGeneral;
     Pinyon Script is the closest Google substitute for GeographicaScript.
     -------------------------------------------------------------------------- */
  --font-serif:  'STIX Two Text', 'STIXGeneral-Regular', 'Bodoni Moda', 'Didot', 'Cormorant Garamond', Garamond, serif;
  --font-script: 'GeographicaScript', 'Pinyon Script', 'Italianno', cursive;
  --font-sans:   'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;

  /* --------------------------------------------------------------------------
     TYPE SCALE (semantic token names; sizes in px)
     -------------------------------------------------------------------------- */
  --fs-display-mega: 96px;
  --fs-display-xl:   72px;
  --fs-display-lg:   56px;
  --fs-display-md:   36px;

  --fs-script-mega: 128px;
  --fs-script-xl:    72px;
  --fs-script-lg:    48px;
  --fs-script-md:    32px;

  --fs-editorial-body: 28px;
  --fs-body-md:        14px;
  --fs-body-sm:        13px;
  --fs-caption:        11px;
  --fs-nav:            12px;
  --fs-button:         12px;
  --fs-drop-cap:      144px;

  /* Tracking */
  --tracking-tight:   -0.02em;  /* display-mega / display-xl */
  --tracking-snug:    -0.01em;  /* display-lg */
  --tracking-normal:  0;
  --tracking-wide:    0.2em;    /* uppercase labels */

  /* Line heights */
  --lh-display:   1.1;
  --lh-display-lg: 1.15;
  --lh-display-md: 1.2;
  --lh-script:    1.0;
  --lh-editorial: 1.5;
  --lh-body:      1.6;
  --lh-caption:   1.4;
  --lh-drop:      0.8;

  /* Weights */
  --fw-light:  300;
  --fw-normal: 400;
  --fw-medium: 500;

  /* --------------------------------------------------------------------------
     SPACING (8px-derived ladder)
     -------------------------------------------------------------------------- */
  --s-xxxs:         4px;
  --s-xxs:          8px;
  --s-xs:          16px;
  --s-sm:          24px;
  --s-md:          32px;
  --s-lg:          48px;
  --s-xl:          64px;
  --s-xxl:         96px;
  --s-section:    128px;
  --s-section-dp: 192px;

  /* --------------------------------------------------------------------------
     RADIUS
     -------------------------------------------------------------------------- */
  --r-none: 0px;
  --r-sm:   2px;
  --r-pill: 9999px;

  /* --------------------------------------------------------------------------
     ELEVATION — exactly one shadow tier in the system
     -------------------------------------------------------------------------- */
  --shadow-featured: 0 8px 24px rgba(26, 20, 16, 0.08);

  /* --------------------------------------------------------------------------
     CONTAINER
     -------------------------------------------------------------------------- */
  --container-default:   1280px;
  --container-manifesto: 1152px;

  /* --------------------------------------------------------------------------
     MOTION
     -------------------------------------------------------------------------- */
  --ease-brand:   cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:     200ms;
  --dur-mid:      500ms;
  --dur-slow:     700ms;
  --dur-reveal:   800ms;
  --dur-marquee:  25s;

  /* --------------------------------------------------------------------------
     GRADIENTS — used scarcely
     -------------------------------------------------------------------------- */
  --grad-hero-darken: linear-gradient(
    to bottom,
    rgba(26, 20, 16, 0.4),
    transparent,
    rgba(26, 20, 16, 0.6)
  );
  --grad-marquee-mask: linear-gradient(
    to right,
    transparent,
    black 128px,
    black calc(100% - 128px),
    transparent
  );
}

/* ==========================================================================
   BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--c-canvas);
  color: var(--c-body);
  font-family: var(--font-sans);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--c-selection-bg); color: var(--c-selection-fg); }

/* ==========================================================================
   SEMANTIC ELEMENT STYLES
   ========================================================================== */

/* Display headlines — Cormorant 400, never bold */
h1, .display-mega {
  font-family: var(--font-serif);
  font-size: var(--fs-display-mega);
  font-weight: var(--fw-normal);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h2, .display-xl {
  font-family: var(--font-serif);
  font-size: var(--fs-display-xl);
  font-weight: var(--fw-normal);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h3, .display-lg {
  font-family: var(--font-serif);
  font-size: var(--fs-display-lg);
  font-weight: var(--fw-normal);
  line-height: var(--lh-display-lg);
  letter-spacing: var(--tracking-snug);
  margin: 0;
}
h4, .display-md {
  font-family: var(--font-serif);
  font-size: var(--fs-display-md);
  font-weight: var(--fw-normal);
  line-height: var(--lh-display-md);
  letter-spacing: var(--tracking-normal);
  margin: 0;
}

/* Script accent */
.script-mega {
  font-family: var(--font-script);
  font-size: var(--fs-script-mega);
  font-weight: var(--fw-normal);
  line-height: var(--lh-script);
  color: var(--c-accent-script);
}
.script-xl {
  font-family: var(--font-script);
  font-size: var(--fs-script-xl);
  font-weight: var(--fw-normal);
  line-height: var(--lh-script);
  color: var(--c-accent-script);
}
.script-lg {
  font-family: var(--font-script);
  font-size: var(--fs-script-lg);
  font-weight: var(--fw-normal);
  line-height: 1.1;
  color: var(--c-accent-script);
}
.script-md {
  font-family: var(--font-script);
  font-size: var(--fs-script-md);
  font-weight: var(--fw-normal);
  line-height: var(--lh-display-md);
  color: var(--c-accent-script);
}
.script-on-dark { color: var(--c-accent-script-on-dark); }

/* Editorial body — used for the manifesto paragraph */
.editorial-body {
  font-family: var(--font-serif);
  font-size: var(--fs-editorial-body);
  font-weight: var(--fw-normal);
  line-height: var(--lh-editorial);
  letter-spacing: 0;
  margin: 0;
}

/* Body / Inter */
p, .body-md {
  font-family: var(--font-sans);
  font-size: var(--fs-body-md);
  font-weight: var(--fw-normal);
  line-height: var(--lh-body);
  margin: 0;
}
.body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-normal);
  line-height: var(--lh-caption);
}
.body-muted { color: var(--c-body-muted); }

/* Caption / nav / button — uppercase 0.2em */
.caption,
.nav-link,
.button-label {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  line-height: var(--lh-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.nav-link    { font-size: var(--fs-nav); }
.button-label{ font-size: var(--fs-button); line-height: 1; }

/* Drop cap */
.drop-cap {
  font-family: var(--font-serif);
  font-size: var(--fs-drop-cap);
  font-weight: var(--fw-normal);
  line-height: var(--lh-drop);
  color: var(--c-primary);
  float: left;
  margin: 0 16px -4px 0;
}

/* Marquee italic-serif moment — the ONLY italic serif on the page */
.marquee-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-display-md);
  font-weight: var(--fw-normal);
  color: var(--c-primary);
  white-space: nowrap;
}

/* ==========================================================================
   COMPONENT PRIMITIVES — minimal class-based building blocks
   ========================================================================== */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--fs-button);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-brand),
              color var(--dur-fast) var(--ease-brand),
              transform var(--dur-fast) var(--ease-brand);
}
.btn--primary-dark {
  background: var(--c-canvas-dark);
  color: var(--c-ink-on-dark);
  padding: 16px 32px;
  border-radius: var(--r-none);
}
.btn--primary-dark:hover { background: var(--c-primary); }

.btn--primary-cream {
  background: var(--c-canvas-cream);
  color: var(--c-canvas-dark);
  padding: 8px 20px;
  border-radius: var(--r-pill);
}
.btn--primary-cream:hover { background: var(--c-canvas); }

.btn--outline-on-light {
  background: transparent;
  color: var(--c-canvas-dark);
  padding: 12px 32px;
  border: 1px solid var(--c-canvas-dark);
  border-radius: var(--r-none);
}
.btn--outline-on-light:hover {
  background: var(--c-canvas-dark);
  color: var(--c-ink-on-dark);
}

.btn--terracotta {
  background: var(--c-primary);
  color: var(--c-on-primary);
  padding: 16px 32px;
  border-radius: var(--r-none);
}
.btn--terracotta:hover { background: var(--c-primary-hover); }

/* Surfaces / bands */
.band-canvas       { background: var(--c-canvas);            color: var(--c-ink); }
.band-cream        { background: var(--c-canvas-cream);      color: var(--c-ink); }
.band-cream-light  { background: var(--c-canvas-cream-light); color: var(--c-ink); }
.band-dark         { background: var(--c-canvas-dark);       color: var(--c-ink-on-dark); }

/* Hairline rule */
.rule       { border: 0; border-top: 1px solid var(--c-hairline-on-light); margin: 0; }
.rule--dark { border-color: var(--c-hairline-on-dark); }

/* Film grain overlay — apply .grain to any element */
.grain { position: relative; }
.grain::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.04;
  z-index: 1;
  background-image: url("assets/film-grain.svg");
  background-repeat: repeat;
  background-size: 200px 200px;
  mix-blend-mode: multiply;
}
.band-dark.grain::before { mix-blend-mode: screen; opacity: 0.06; }

/* Vertical stripe motif — observed in lookbook (imessage post).
   Used as a poster-style backdrop on terracotta surfaces. */
.stripes-terracotta {
  background-color: var(--c-primary);
  background-image: repeating-linear-gradient(
    to right,
    var(--c-primary) 0,
    var(--c-primary) 60px,
    var(--c-primary-deep) 60px,
    var(--c-primary-deep) 120px
  );
}
.stripes-cream {
  background-color: var(--c-canvas-cream);
  background-image: repeating-linear-gradient(
    to right,
    var(--c-canvas-cream) 0,
    var(--c-canvas-cream) 60px,
    var(--c-canvas-cream-light) 60px,
    var(--c-canvas-cream-light) 120px
  );
}

/* AP monogram — composed from Cormorant A + Italianno p */
.monogram {
  display: inline-block;
  position: relative;
  font-family: var(--font-serif);
  font-size: var(--fs-display-md);
  font-weight: var(--fw-normal);
  line-height: 1;
  color: var(--c-ink);
  user-select: none;
}
.monogram::after {
  content: "p";
  font-family: var(--font-script);
  font-size: 32px;
  font-style: italic;
  font-weight: var(--fw-normal);
  color: var(--c-primary);
  position: absolute;
  bottom: -4px;
  right: -16px;
  line-height: 1;
}
.monogram--cream      { color: var(--c-ink-on-dark); }
.monogram--cream::after { color: var(--c-primary-hover); }
.monogram--terracotta { color: var(--c-primary); }
.monogram--terracotta::after { color: var(--c-primary); }