/* ==========================================================================
   Clara design tokens — web mirror of ClaraColor and ClaraFont (Theme.swift).
   Hand-generated from docs/style-guide.html in the `clara` monorepo.
   Update this file whenever Theme.swift changes.

   This file contains custom properties and named type-style classes ONLY.
   No layout, no page-specific rules. Those belong in site.css.
   ========================================================================== */

:root {
  /* ---- Color — ClaraColor -------------------------------------------- */
  --clara-background: #1C1A17;      /* ClaraColor.background */
  --clara-tile-surface: #26211F;    /* ClaraColor.tileSurface */
  --clara-tile-border: #3B332E;     /* ClaraColor.tileBorder */
  --clara-inactive: #4A4540;        /* ClaraColor.inactive */
  --clara-primary-text: #F2EBE0;    /* ClaraColor.primaryText */
  --clara-secondary-text: #998F85;  /* ClaraColor.secondaryText */
  --clara-amber-accent: #D18A1C;    /* ClaraColor.amberAccent */
  --clara-sage-accent: #709E75;     /* ClaraColor.sageAccent */
  --clara-error: #CC5747;           /* ClaraColor.error */

  /* ---- Type families — ClaraFont ------------------------------------- */
  --clara-font-display: 'Cormorant', Georgia, 'Times New Roman', serif;
  --clara-font-accent: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* ---- Line heights --------------------------------------------------- */
  /* The app's default. Every UI string uses this. */
  --clara-line-tight: 1.25;
  /* WEB-ONLY EXTENSION (approved). The app never renders more than a couple
     of lines of continuous prose; the marketing page does. Used only on
     multi-line prose blocks via .clara-prose — never on UI-equivalent text. */
  --clara-line-prose: 1.6;

  /* ---- Fluid display size --------------------------------------------- */
  /* WEB-ONLY EXTENSION (approved). This is the ONLY size on the web that
     deviates from the fixed Swift type scale. At phone widths the clamp
     floor resolves to 38px, which is identical to ClaraFont heroTitle in the
     app; it scales up to 68px on wide viewports, where a fixed 38px headline
     would read as undersized against a 1080px measure. Every other size in
     this file is the literal Swift value. */
  --clara-size-hero-fluid: clamp(2.375rem, 6vw, 4.25rem);

  /* ---- Reading measures ----------------------------------------------- */
  /* WEB-ONLY (approved). The app lays out in fixed-width rows and tiles, so
     it has no need for a measure. On the web, unconstrained text runs past 90
     characters per line, which is roughly twice a comfortable line. */
  --clara-measure-display: 46ch;  /* .clara-prose-display — Cormorant prose */
  --clara-measure-ui: 54ch;       /* Montserrat body and helper text */
  --clara-measure-title: 18ch;    /* section titles: two or three strong lines */

  /* ---- Motion — the app's motion vocabulary ---------------------------- */
  --clara-motion-dimmer: 0.9s;
  --clara-motion-dimmer-ease: cubic-bezier(0.42, 0, 0.58, 1);  /* easeInOut */
  --clara-motion-glow-bloom: 0.5s;
  --clara-motion-glow-ease: cubic-bezier(0, 0, 0.58, 1);       /* easeOut */
  --clara-motion-stagger: 0.15s;
}

/* ==========================================================================
   Named type styles — one class per ClaraFont.Style.
   ========================================================================== */

.clara-hero-title {
  font-family: var(--clara-font-display);
  font-size: var(--clara-size-hero-fluid);
  font-weight: 400;
  color: var(--clara-primary-text);
  line-height: var(--clara-line-tight);
}

.clara-page-title {
  font-family: var(--clara-font-display);
  font-size: 30px;
  font-weight: 500;
  color: var(--clara-primary-text);
  line-height: var(--clara-line-tight);
}

/* WEB-ONLY EXTENSION (approved). The second deliberate deviation from the
   fixed Swift type scale, alongside --clara-size-hero-fluid.

   In the app this is a fixed 25px, sitting above 18px body — a 1.4x step,
   which is right for a section header a thumb's reach from the eye. On a
   marketing page read at arm's length, and now set against 22px Cormorant
   prose, 1.4x is not a hierarchy at all; the title and the paragraph read as
   the same voice. The clamp takes the step past 2.3x at every width. Its
   floor (32px) is still above the app's 25px, because even the phone layout
   here has more room than a settings screen. */
.clara-section-title {
  font-family: var(--clara-font-display);
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  font-weight: 500;
  color: var(--clara-primary-text);
  line-height: var(--clara-line-tight);
}

.clara-card-title {
  font-family: var(--clara-font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--clara-primary-text);
  line-height: var(--clara-line-tight);
}

.clara-row-title {
  font-family: var(--clara-font-accent);
  font-size: 16px;
  font-weight: 600;
  color: var(--clara-primary-text);
  line-height: var(--clara-line-tight);
}

.clara-row-label {
  font-family: var(--clara-font-accent);
  font-size: 16px;
  font-weight: 400;
  color: var(--clara-primary-text);
  line-height: var(--clara-line-tight);
}

.clara-body {
  font-family: var(--clara-font-accent);
  font-size: 18px;
  font-weight: 400;
  color: var(--clara-primary-text);
  line-height: var(--clara-line-tight);
}

.clara-helper {
  font-family: var(--clara-font-accent);
  font-size: 16px;
  font-weight: 400;
  color: var(--clara-secondary-text);
  line-height: var(--clara-line-tight);
}

.clara-caption {
  font-family: var(--clara-font-accent);
  font-size: 13px;
  font-weight: 400;
  color: var(--clara-secondary-text);
  line-height: var(--clara-line-tight);
}

.clara-small-label {
  font-family: var(--clara-font-accent);
  font-size: 13px;
  font-weight: 400;
  color: var(--clara-primary-text);
  line-height: var(--clara-line-tight);
}

.clara-inactive-label {
  font-family: var(--clara-font-accent);
  font-size: 13px;
  font-weight: 400;
  color: var(--clara-inactive);
  line-height: var(--clara-line-tight);
}

.clara-eyebrow {
  font-family: var(--clara-font-accent);
  font-size: 13px;
  font-weight: 600;
  color: var(--clara-secondary-text);
  line-height: var(--clara-line-tight);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.clara-eyebrow-accent {
  font-family: var(--clara-font-accent);
  font-size: 13px;
  font-weight: 600;
  color: var(--clara-amber-accent);
  line-height: var(--clara-line-tight);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.clara-highlight {
  font-family: var(--clara-font-accent);
  font-size: 16px;
  font-weight: 500;
  color: var(--clara-amber-accent);
  line-height: var(--clara-line-tight);
}

.clara-on-accent {
  font-family: var(--clara-font-accent);
  font-size: 16px;
  font-weight: 500;
  color: var(--clara-background);
  line-height: var(--clara-line-tight);
}

.clara-error {
  font-family: var(--clara-font-accent);
  font-size: 13px;
  font-weight: 400;
  color: var(--clara-error);
  line-height: var(--clara-line-tight);
}

.clara-error-body {
  font-family: var(--clara-font-accent);
  font-size: 18px;
  font-weight: 400;
  color: var(--clara-error);
  line-height: var(--clara-line-tight);
}

/* ==========================================================================
   Modifiers
   ========================================================================== */

/* Applied alongside .clara-body on multi-line marketing prose blocks. */
.clara-prose {
  line-height: var(--clara-line-prose);
}

/* ==========================================================================
   Editorial styles — WEB-ONLY (approved).

   The app has no continuous prose and no punchlines, so these have no Swift
   counterpart. They are built from the existing families and color tokens;
   nothing new is introduced but the sizes and the weights.
   ========================================================================== */

/* The editorial prose voice: Cormorant carrying paragraph text. */
.clara-prose-display {
  font-family: var(--clara-font-display);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem); /* 18px → 22px */
  font-weight: 300;
  line-height: 1.85;
  color: var(--clara-primary-text);
}

/* For prose sitting over video, where 300 is too thin to hold up. */
.clara-prose-display--solid {
  font-weight: 400;
}

/* For a closing, reflective line. */
.clara-prose-display--recede {
  font-style: italic;
  color: var(--clara-secondary-text);
}

/* The punchline voice — the line a visitor should remember.
   Replaces .clara-highlight for section closing lines only; .clara-highlight
   remains the correct style for inline UI emphasis. */
.clara-statement {
  font-family: var(--clara-font-display);
  font-size: clamp(1.5rem, 2.6vw, 1.9375rem); /* 24px → 31px */
  font-weight: 400;
  line-height: var(--clara-line-tight);
  color: var(--clara-amber-accent);
}