/* ========================================================================
   Cycle Calendar — Design Tokens (CSS Custom Properties)
   Source of truth: design-tokens.json / styleguide.html
   Generated: 2026-04-20 · v1.0.0
   ========================================================================
   Import:  <link rel="stylesheet" href="/tokens.css">
   Usage:   color: var(--color-teal); padding: var(--space-lg);
   ======================================================================== */

:root {
  /* ─── Colors · Teal spectrum ─── */
  --color-abyss:       #0b2b2a;
  --color-deep-teal:   #143d3e;
  --color-ocean:       #1f6b62;
  --color-teal:        #3d9e94;  /* primary brand */
  --color-sea-green:   #5aada0;
  --color-sage:        #7ec4b5;
  --color-seafoam:     #a8d8cc;
  --color-mist:        #cce8e0;

  /* ─── Colors · Warm accents ─── */
  --color-coral:       #c4786e;
  --color-salmon:      #d49882;
  --color-peach:       #deb896;
  --color-cream:       #ede4d4;
  --color-shell:       #f4f2ed;  /* page background */

  /* ─── Colors · Text ─── */
  --color-text-primary:   #0e2e2c;
  --color-text-secondary: #3a5a56;
  --color-text-tertiary:  #6b8a84;
  --color-border:         rgba(14, 46, 44, 0.1);

  /* ─── Colors · Cycle phase (semantic) ─── */
  --color-phase-regeneration: #ab47bc;
  --color-phase-rise:         #43a047;
  --color-phase-peak:         #1e88e5;
  --color-phase-shift:        #ef6c00;

  /* ─── Semantic aliases ─── */
  --color-background:    var(--color-shell);
  --color-surface:       #ffffff;
  --color-surface-dark:  var(--color-abyss);
  --color-brand:         var(--color-teal);
  --color-brand-hover:   var(--color-ocean);
  --color-accent:        var(--color-coral);
  --color-on-brand:      #ffffff;
  --color-on-dark:       #ffffff;
  --color-on-light:      var(--color-text-primary);

  /* ─── Typography · Families ─── */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Sora', system-ui, -apple-system, sans-serif;

  /* ─── Typography · Weights ─── */
  --font-weight-extralight: 200;
  --font-weight-light:      300;
  --font-weight-regular:    400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;

  /* ─── Typography · Line heights ─── */
  --line-height-tight:   1.2;
  --line-height-snug:    1.4;
  --line-height-normal:  1.6;
  --line-height-relaxed: 1.7;

  /* ─── Typography · Letter spacing ─── */
  --letter-spacing-normal: 0;
  --letter-spacing-tight:  -0.01em;
  --letter-spacing-wide:   1px;
  --letter-spacing-wider:  1.5px;
  --letter-spacing-widest: 2.5px;

  /* ─── Typography · Type scale ─── */
  --font-size-hero:    34px;
  --font-size-section: 28px;
  --font-size-card:    20px;
  --font-size-body:    18px;
  --font-size-small:   15px;
  --font-size-caption: 13px;
  --font-size-label:   11px;

  /* ─── Spacing · 8px base grid ─── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* ─── Radius ─── */
  --radius-input: 8px;
  --radius-cta:   10px;
  --radius-card:  14px;
  --radius-pill:  24px;
  --radius-full:  9999px;

  /* ─── Shadow ─── */
  --shadow-cta:         0 4px 16px rgba(61, 158, 148, 0.25);
  --shadow-card-hover:  0 4px 20px rgba(14, 46, 44, 0.08);

  /* ─── Motion ─── */
  --duration-instant:   0s;
  --duration-fast:      0.2s;
  --duration-standard:  0.3s;
  --duration-slow:      0.5s;
  --easing-standard:    cubic-bezier(0.4, 0, 0.2, 1);
  --easing-decelerate:  cubic-bezier(0.0, 0, 0.2, 1);
  --easing-accelerate:  cubic-bezier(0.4, 0, 1, 1);

  /* ─── Breakpoints (informational — use in @media manually) ─── */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ─── Measure (line width) ─── */
  --measure-tight:   34ch;
  --measure-optimal: 60ch;
  --measure-max:     75ch;
}

/* ========================================================================
   Typography utility classes (optional — map type scale to selectors)
   ======================================================================== */
.t-hero    { font-family: var(--font-display); font-size: var(--font-size-hero);    font-weight: var(--font-weight-light);   line-height: var(--line-height-tight); color: var(--color-text-primary); }
.t-section { font-family: var(--font-display); font-size: var(--font-size-section); font-weight: var(--font-weight-light);   line-height: var(--line-height-snug);  color: var(--color-text-primary); }
.t-card    { font-family: var(--font-display); font-size: var(--font-size-card);    font-weight: var(--font-weight-light);   line-height: var(--line-height-snug);  color: var(--color-text-primary); }
.t-body    { font-family: var(--font-body);    font-size: var(--font-size-body);    font-weight: var(--font-weight-light);   line-height: var(--line-height-normal); color: var(--color-text-secondary); }
.t-small   { font-family: var(--font-body);    font-size: var(--font-size-small);   font-weight: var(--font-weight-light);   line-height: var(--line-height-normal); color: var(--color-text-secondary); }
.t-caption { font-family: var(--font-body);    font-size: var(--font-size-caption); font-weight: var(--font-weight-light);   line-height: var(--line-height-normal); color: var(--color-text-tertiary); }
.t-label   { font-family: var(--font-body);    font-size: var(--font-size-label);   font-weight: var(--font-weight-medium);  letter-spacing: var(--letter-spacing-widest); text-transform: uppercase; color: var(--color-teal); }