/* ============================================================
   APLOTITA — Colors & Type
   απλότητα · "simplicity"
   Handmade jewelry from beach pebbles.
   ------------------------------------------------------------
   A quiet, natural, minimalist system. Three base colors,
   extended into harmonious scales with oklch. Two typefaces:
   Cormorant Garamond (elegant serif display) + Jost (calm
   geometric sans for body & UI).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Jost:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap');

:root {
  /* ---------- BASE PALETTE (brand-given) ---------- */
  --green: #2b2d21;        /* deep moss — primary ink & dark surfaces */
  --sage: #b5b697;         /* dusty light green — secondary / muted */
  --beige: #f0eee7;        /* warm paper — primary background */

  /* ---------- GREEN scale (moss) ---------- */
  --green-900: oklch(22% 0.014 120);   /* #1c1d15 deepest */
  --green-800: #2b2d21;                /* primary */
  --green-700: oklch(32% 0.018 118);   /* #393b2c */
  --green-600: oklch(40% 0.020 116);   /* #4c4e3b */
  --green-500: oklch(50% 0.022 115);   /* #63654f */

  /* ---------- SAGE scale (dusty green) ---------- */
  --sage-700: oklch(60% 0.020 112);    /* #7f8068 */
  --sage-600: oklch(68% 0.024 110);    /* #989a7d */
  --sage-500: #b5b697;                 /* primary sage */
  --sage-400: oklch(81% 0.022 108);    /* #c7c8ad */
  --sage-300: oklch(87% 0.018 106);    /* #d8d9c4 */
  --sage-200: oklch(92% 0.014 104);    /* #e7e7d9 */

  /* ---------- BEIGE / PAPER scale ---------- */
  --paper-50:  oklch(98% 0.006 95);    /* #faf9f4 lightest */
  --paper-100: #f0eee7;                /* primary bg */
  --paper-200: oklch(93% 0.010 92);    /* #e7e3d8 */
  --paper-300: oklch(88% 0.012 90);    /* #d8d3c4 card edges */
  --paper-400: oklch(80% 0.014 88);    /* #c0baa8 hairlines on paper */

  /* ---------- STONE accent (warm pebble taupe) ---------- */
  --stone-600: oklch(52% 0.018 70);    /* #6f6553 */
  --stone-500: oklch(62% 0.020 68);    /* #8a7e69 */
  --stone-400: oklch(72% 0.018 66);    /* #a89b85 */

  /* ---------- SEMANTIC: surfaces ---------- */
  --bg:           var(--paper-100);
  --bg-raised:    var(--paper-50);
  --bg-inverse:   var(--green-800);
  --bg-sage:      var(--sage-200);

  /* ---------- SEMANTIC: text ---------- */
  --fg1:  var(--green-800);                  /* primary ink */
  --fg2:  oklch(45% 0.018 116);              /* secondary text */
  --fg3:  oklch(58% 0.018 112);              /* muted / captions */
  --fg-on-dark:   var(--paper-100);          /* text on green */
  --fg-on-dark-2: var(--sage-400);           /* muted on green */

  /* ---------- SEMANTIC: lines & accents ---------- */
  --line:        oklch(85% 0.013 92);        /* default hairline on paper */
  --line-strong: var(--paper-400);
  --line-on-dark: oklch(40% 0.018 116);
  --accent:      var(--green-800);           /* primary action */
  --accent-soft: var(--sage-500);

  /* ---------- TYPE: families ---------- */
  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans:  'Jost', 'Helvetica Neue', Arial, sans-serif;
  --mono:  'Jost', ui-monospace, monospace;

  /* ---------- TYPE: weights ---------- */
  --w-light: 300;
  --w-reg:   400;
  --w-med:   500;
  --w-semi:  600;

  /* ---------- TYPE: fluid display scale ---------- */
  --t-hero:    clamp(3.5rem, 7vw, 6.5rem);   /* serif, light */
  --t-display: clamp(2.75rem, 5vw, 4.5rem);
  --t-h1:      clamp(2.25rem, 3.5vw, 3.25rem);
  --t-h2:      clamp(1.75rem, 2.6vw, 2.4rem);
  --t-h3:      1.5rem;
  --t-lead:    1.3125rem;   /* 21px intro body */
  --t-body:    1.0625rem;   /* 17px */
  --t-small:   0.9375rem;   /* 15px */
  --t-caption: 0.8125rem;   /* 13px */
  --t-label:   0.6875rem;   /* 11px — tracked uppercase eyebrows */

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

  /* ---------- RADII (soft, pebble-like; restrained) ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-pill: 999px;
  --r-pebble: 62% 38% 46% 54% / 60% 56% 44% 40%;  /* organic blob */

  /* ---------- SHADOWS (whisper-soft, warm) ---------- */
  --shadow-sm: 0 1px 2px oklch(30% 0.02 110 / 0.06);
  --shadow-md: 0 6px 24px -10px oklch(30% 0.02 110 / 0.18);
  --shadow-lg: 0 18px 48px -18px oklch(30% 0.02 110 / 0.26);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);   /* gentle settle */
  --dur:  420ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.t-eyebrow {
  font-family: var(--sans);
  font-weight: var(--w-reg);
  font-size: var(--t-label);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--fg3);
}
.t-hero {
  font-family: var(--serif);
  font-weight: var(--w-light);
  font-size: var(--t-hero);
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--fg1);
}
.t-display {
  font-family: var(--serif);
  font-weight: var(--w-light);
  font-size: var(--t-display);
  line-height: 1.04;
  color: var(--fg1);
}
h1, .t-h1 {
  font-family: var(--serif);
  font-weight: var(--w-reg);
  font-size: var(--t-h1);
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--fg1);
}
h2, .t-h2 {
  font-family: var(--serif);
  font-weight: var(--w-reg);
  font-size: var(--t-h2);
  line-height: 1.14;
  color: var(--fg1);
}
h3, .t-h3 {
  font-family: var(--sans);
  font-weight: var(--w-med);
  font-size: var(--t-h3);
  line-height: 1.3;
  color: var(--fg1);
}
.t-lead {
  font-family: var(--serif);
  font-weight: var(--w-light);
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--fg2);
}
p, .t-body {
  font-family: var(--sans);
  font-weight: var(--w-light);
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--fg2);
}
.t-small {
  font-family: var(--sans);
  font-weight: var(--w-light);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--fg2);
}
.t-caption {
  font-family: var(--sans);
  font-weight: var(--w-reg);
  font-size: var(--t-caption);
  line-height: 1.5;
  color: var(--fg3);
}
.t-label {
  font-family: var(--sans);
  font-weight: var(--w-med);
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg2);
}

/* Price / numerals — light serif, the jeweler's voice */
.t-price {
  font-family: var(--serif);
  font-weight: var(--w-reg);
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  color: var(--fg1);
}