/* ==========================================================================
   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);

  /* ---- 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);
}

.clara-section-title {
  font-family: var(--clara-font-display);
  font-size: 25px;
  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);
}