/* =========================================================================
   Pilaticise — Colors & Type
   Earthy pastel palette for a Tokyo Pilates studio.
   Import this once in every HTML file:
       <link rel="stylesheet" href="/colors_and_type.css">
   ========================================================================= */

/* ---- Typography: Pilaticise uses Futura Cyrillic across the system.
   The logo wordmark is Futura Light. Body is Futura Book.
   A humanist serif (Cormorant Garamond via Google) is kept ONLY as a
   secondary editorial face. ---- */
@font-face {
  font-family: 'Futura Cyrillic';
  src: url('fonts/FuturaCyrillicLight.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Futura Cyrillic';
  src: url('fonts/FuturaCyrillicBook.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Futura Cyrillic';
  src: url('fonts/FuturaCyrillicMedium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Futura Cyrillic';
  src: url('fonts/FuturaCyrillicDemi.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Futura Cyrillic';
  src: url('fonts/FuturaCyrillicBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Futura Cyrillic';
  src: url('fonts/FuturaCyrillicExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Futura Cyrillic';
  src: url('fonts/FuturaCyrillicHeavy.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Albertus Nova';
  src: url('fonts/Albertus-Nova-W07-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------------------------------------------------------------------
     PALETTE — earthy pastels, warm and grounded.
     "Clay" is the hero color taken from the logo background.
     --------------------------------------------------------------------- */

  /* Clay — primary brand (from logo) */
  --clay-900: #7a4a3a;
  --clay-700: #a46952;
  --clay-500: #c28871;   /* logo bg — hero */
  --clay-300: #d9a992;
  --clay-100: #f0d8cb;
  --clay-50:  #f9ecdf;

  /* Sand — warm neutral base / paper */
  --sand-900: #3d342c;
  --sand-700: #6b5d50;
  --sand-500: #a89683;
  --sand-300: #d8cab6;
  --sand-100: #ede3d2;
  --sand-50:  #f6efe2;   /* page background */
  --sand-0:   #fbf7ee;   /* lightest cream */

  /* Sage — calming pastel green */
  --sage-900: #3d4a3a;
  --sage-700: #6b7a5f;
  --sage-500: #9aa886;
  --sage-300: #c3ceab;
  --sage-100: #e3e8d3;
  --sage-50:  #eef2e4;

  /* Rose — soft pink accent */
  --rose-900: #6b3a3a;
  --rose-700: #a46e6b;
  --rose-500: #d4a5a0;
  --rose-300: #e8c9c4;
  --rose-100: #f4dedb;
  --rose-50:  #faecea;

  /* Sky — dusty pastel blue (sparingly) */
  --sky-900: #3a4a55;
  --sky-700: #6b7f8a;
  --sky-500: #9fb3bc;
  --sky-300: #c4d1d7;
  --sky-100: #e0e7ea;
  --sky-50:  #edf1f3;

  /* Ink — text */
  --ink-900: #2a221c;   /* highest contrast, warm near-black */
  --ink-700: #4a3f35;
  --ink-500: #7a6b5d;
  --ink-300: #a89683;

  /* ---------------------------------------------------------------------
     SEMANTIC TOKENS
     --------------------------------------------------------------------- */
  --bg:        var(--sand-50);
  --bg-alt:    var(--sand-100);
  --bg-cream:  var(--sand-0);
  --surface:   #ffffff;
  --surface-warm: var(--sand-0);

  --fg-1: var(--ink-900);     /* primary text */
  --fg-2: var(--ink-700);     /* secondary text */
  --fg-3: var(--ink-500);     /* muted / captions */
  --fg-4: var(--ink-300);     /* placeholder / hairlines on light */

  --brand:      var(--clay-500);
  --brand-deep: var(--clay-700);
  --brand-soft: var(--clay-100);

  --accent-sage: var(--sage-500);
  --accent-rose: var(--rose-500);
  --accent-sky:  var(--sky-500);

  --border:     rgba(42, 34, 28, 0.10);
  --border-strong: rgba(42, 34, 28, 0.18);
  --hairline:   rgba(42, 34, 28, 0.06);

  --success: #7a8f6a;
  --warning: #c49a5a;
  --danger:  #b56a5a;

  /* ---------------------------------------------------------------------
     TYPOGRAPHY
     --------------------------------------------------------------------- */
  --font-display: 'Albertus Nova', 'Trajan Pro', 'Optima', Georgia, serif;
  --font-sans:    'Futura Cyrillic', 'Futura', 'Avenir Next', -apple-system, sans-serif;
  --font-serif:   'Albertus Nova', 'Trajan Pro', 'Optima', Georgia, serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Type scale (modular, 1.25) */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  88px;
  --fs-6xl:  120px;

  /* ---------------------------------------------------------------------
     SPACING (4px base)
     --------------------------------------------------------------------- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ---------------------------------------------------------------------
     RADII — generous, soft; never sharp
     --------------------------------------------------------------------- */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-xl:   32px;
  --r-2xl:  48px;
  --r-pill: 999px;
  --r-arch: 999px 999px 8px 8px;  /* signature arch shape from logo */

  /* ---------------------------------------------------------------------
     SHADOWS — diffuse, warm; no hard drop shadows
     --------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(42, 34, 28, 0.04);
  --shadow-sm: 0 2px 8px rgba(42, 34, 28, 0.05), 0 1px 2px rgba(42, 34, 28, 0.03);
  --shadow-md: 0 8px 24px rgba(42, 34, 28, 0.06), 0 2px 4px rgba(42, 34, 28, 0.03);
  --shadow-lg: 0 20px 50px rgba(42, 34, 28, 0.08), 0 4px 10px rgba(42, 34, 28, 0.04);
  --shadow-warm: 0 20px 60px rgba(164, 105, 82, 0.14);

  /* ---------------------------------------------------------------------
     MOTION
     --------------------------------------------------------------------- */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);   /* primary — soft arrive */
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:  150ms;
  --dur-med:   280ms;
  --dur-slow:  500ms;
}

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

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 700;             /* Albertus Nova Bold */
  color: var(--fg-1);
  letter-spacing: 0.005em;
  line-height: 1.1;
  text-wrap: balance;
}

h1 { font-size: var(--fs-4xl); font-weight: 700; letter-spacing: 0; }
h2 { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: 0.005em; }
h3 { font-family: var(--font-sans); font-size: var(--fs-xl); font-weight: 400; letter-spacing: 0.01em; line-height: 1.25; }
h4 { font-family: var(--font-sans); font-size: var(--fs-md); font-weight: 500; letter-spacing: 0.02em; line-height: 1.35; text-transform: none; }

p, li {
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--fg-2);
  text-wrap: pretty;
}

small, .caption {
  font-size: var(--fs-sm);
  color: var(--fg-3);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.display-xl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-6xl);
  line-height: 0.95;
  letter-spacing: 0;
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--sand-100);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  color: var(--fg-2);
}

a {
  color: var(--brand-deep);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--dur-fast) var(--ease);
}
a:hover { opacity: 0.65; }

hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: var(--sp-6) 0;
}

::selection {
  background: var(--clay-100);
  color: var(--ink-900);
}