/* =====================================================================
   CEDRO — Colors & Type Foundation
   ---------------------------------------------------------------------
   The Cedro system rests on three ingredients:
     · editorial serif (Playfair Display) for anything that slows the eye
     · clean sans (Inter) for everything that supports
     · a warm, restrained palette: ink, cream, a single gold accent
   Everything else (motion, elevation, iconography) is *absence* —
   the Jony-Ive discipline of deciding what to remove.
===================================================================== */

/* ---- Webfonts (loaded via Google Fonts; see README for substitution notes) ---- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ================================================================
     1. COLOR — INK & GRAY SCALE
     ---------------------------------------------------------------- */
  --cedro-black:       #1A1A1A;  /* body text, primary surfaces (dark mode) */
  --cedro-gray-dark:   #3E3E3E;  /* logo stroke, secondary text on light */
  --cedro-gray-mid:    #6B6B6B;  /* supporting copy, meta, labels */
  --cedro-gray-light:  #8A8A8A;  /* placeholder, disabled copy */
  --cedro-gray-pale:   #D4D2CC;  /* dividers, inactive bars, warm-neutral */
  --cedro-cream:       #F9F9F9;  /* primary surface — NEVER pure white */
  --cedro-white:       #FFFFFF;  /* cards, elevated surfaces on cream */

  /* ================================================================
     2. COLOR — GOLD (the only accent)
     ---------------------------------------------------------------- */
  --cedro-gold:        #D3AF37;  /* primary gold — CTAs, highlights */
  --cedro-gold-dark:   #B8962E;  /* readable gold on cream (text) */
  --cedro-gold-hover:  #BF9E2F;  /* primary button hover */
  --cedro-gold-glow:   rgba(211, 175, 55, 0.10); /* gold-tinted chip bg */
  --cedro-gold-glow-strong: rgba(211, 175, 55, 0.15);

  /* ================================================================
     3. COLOR — BORDERS & RULES
     ---------------------------------------------------------------- */
  --cedro-border:        rgba(0, 0, 0, 0.06);     /* default on cream */
  --cedro-border-strong: rgba(0, 0, 0, 0.12);     /* emphasis, focus, dividers */
  --cedro-border-ink:    rgba(255, 255, 255, 0.10); /* on dark surfaces */

  /* ================================================================
     4. COLOR — SEMANTIC
     ---------------------------------------------------------------- */
  --cedro-fg-1:          var(--cedro-black);       /* primary text */
  --cedro-fg-2:          var(--cedro-gray-dark);   /* secondary text */
  --cedro-fg-3:          var(--cedro-gray-pale);   /* tertiary / meta */
  --cedro-fg-inverse-1:  var(--cedro-cream);       /* primary text on black */
  --cedro-fg-inverse-2:  var(--cedro-gray-pale);   /* secondary text on black */
  --cedro-fg-accent:     var(--cedro-gold);        /* links, labels, CTA */

  --cedro-bg-surface:    var(--cedro-cream);       /* default page bg */
  --cedro-bg-elevated:   var(--cedro-white);       /* cards */
  --cedro-bg-contrast:   var(--cedro-black);       /* dark sections */

  --cedro-status-ok:      #00CA4E;  /* success, positive */
  --cedro-status-warning: #FFBD44;  /* caution, needs attention */
  --cedro-status-error:   #FF605C;  /* failure, alert */

  /* ================================================================
     5. TYPE — FAMILIES
     ---------------------------------------------------------------- */
  --cedro-font-serif: 'Playfair Display', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --cedro-font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --cedro-font-mono:  'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ================================================================
     6. TYPE — ROLE TOKENS (semantic)
     ---------------------------------------------------------------- */
  /* Editorial — serif, 400 only, -0.02em tracking */
  --cedro-type-display-size:   clamp(40px, 6vw, 72px);
  --cedro-type-display-lh:     1.05;
  --cedro-type-display-ls:     -0.02em;

  --cedro-type-headline-size:  clamp(28px, 4vw, 48px);
  --cedro-type-headline-lh:    1.1;
  --cedro-type-headline-ls:    -0.02em;

  --cedro-type-title-size:     24px;
  --cedro-type-title-lh:       1.2;
  --cedro-type-title-ls:       -0.02em;

  --cedro-type-subtitle-size:  18px;
  --cedro-type-subtitle-lh:    1.3;
  --cedro-type-subtitle-ls:    -0.02em;

  /* Body — sans, 400 only, no tracking */
  --cedro-type-body-lead-size:    16px;
  --cedro-type-body-lead-lh:      1.75;

  --cedro-type-body-size:      14px;
  --cedro-type-body-lh:        1.6;

  --cedro-type-body-sm-size:   12px;
  --cedro-type-body-sm-lh:     1.5;

  /* Label — sans 500, uppercase, 0.10em tracking */
  --cedro-type-label-size:     12px;
  --cedro-type-label-lh:       1.2;
  --cedro-type-label-weight:   500;
  --cedro-type-label-ls:       0.10em;

  /* ================================================================
     7. MOTION
     ---------------------------------------------------------------- */
  --cedro-ease:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --cedro-ease-in:  cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --cedro-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --cedro-dur-fast:   0.2s;
  --cedro-dur-medium: 0.35s;
  --cedro-dur-slow:   0.85s;

  /* ================================================================
     8. RADIUS, SHADOW, SPACING
     ---------------------------------------------------------------- */
  --cedro-radius-sm:   6px;
  --cedro-radius-md:   10px;
  --cedro-radius-lg:   14px;
  --cedro-radius-pill: 999px;

  --cedro-shadow-sm:   0 4px 24px rgba(0, 0, 0, 0.04);
  --cedro-shadow-md:   0 12px 40px rgba(0, 0, 0, 0.08);
  --cedro-shadow-gold: 0 2px 12px rgba(211, 175, 55, 0.3);

  --cedro-space-1:  4px;
  --cedro-space-2:  8px;
  --cedro-space-3:  16px;
  --cedro-space-4:  24px;
  --cedro-space-5:  32px;
  --cedro-space-6:  48px;
  --cedro-space-7:  64px;
  --cedro-space-8:  96px;

  /* ================================================================
     9. APP SÍNDICO — iOS TOKENS
     (SwiftUI source in App Síndico/DesignSystem/. Mirror here for web.)
     ---------------------------------------------------------------- */
  --app-primary:         #0D5C2F;  /* cedroPrimary — dark forest green */
  --app-primary-light:   #13804A;  /* gradient top on buttons */
  --app-primary-muted:   rgba(13, 92, 47, 0.10);
  --app-success:         #0D5C2F;
  --app-background:      #F4F1EC;  /* warm cream screen bg */
  --app-surface:         #FFFFFF;  /* card background */
  --app-surface-2:       #F4F1EC;  /* inactive pills, empty pickers */
  --app-border:          rgba(0, 0, 0, 0.08);
  --app-text-1:          #1A1A1A;
  --app-text-2:          #6B6B6B;
  --app-text-3:          #A8A8A8;
  --app-accent-rotina:   var(--app-primary);
  --app-accent-melhoria: #E67E22;
  --app-accent-servico:  #2980B9;
  --app-star:            #E8B93B;

  /* iOS type scale (pt → px 1:1) */
  --app-type-display: 28px;  /* Bold */
  --app-type-title:   20px;  /* Semibold */
  --app-type-headline:17px;  /* Semibold */
  --app-type-body-m:  15px;  /* Medium */
  --app-type-body:    15px;  /* Regular */
  --app-type-sub:     14px;  /* Regular */
  --app-type-cap-m:   13px;  /* Medium */
  --app-type-cap:     13px;  /* Regular */
  --app-type-foot:    12px;  /* Regular */
  --app-type-micro:   11px;  /* Medium */

  /* iOS spacing: xs 4 · sm 8 · md 12 · lg 16 · xl 20 · xxl 24 · xxxl 32 · screenPad 20 · sectionGap 24 */
  --app-space-xs: 4px;  --app-space-sm: 8px;  --app-space-md: 12px;
  --app-space-lg: 16px; --app-space-xl: 20px; --app-space-xxl: 24px; --app-space-xxxl: 32px;
  --app-card-radius: 16px;
}

/* =====================================================================
   SEMANTIC ELEMENT STYLES
   Drop colors_and_type.css onto a page and these classes Just Work.
===================================================================== */

.cedro-display-xl,
.cedro-display-lg,
.cedro-headline,
.cedro-title,
.cedro-subtitle {
  font-family: var(--cedro-font-serif);
  font-weight: 400;
  color: var(--cedro-fg-1);
  margin: 0;
}

.cedro-display-xl {
  font-size: var(--cedro-type-display-xl-size);
  line-height: var(--cedro-type-display-xl-lh);
  letter-spacing: var(--cedro-type-display-xl-ls);
}
.cedro-display-lg {
  font-size: var(--cedro-type-display-lg-size);
  line-height: var(--cedro-type-display-lg-lh);
  letter-spacing: var(--cedro-type-display-lg-ls);
}
.cedro-headline {
  font-size: var(--cedro-type-headline-size);
  line-height: var(--cedro-type-headline-lh);
  letter-spacing: var(--cedro-type-headline-ls);
}
.cedro-title {
  font-size: var(--cedro-type-title-size);
  line-height: var(--cedro-type-title-lh);
  letter-spacing: var(--cedro-type-title-ls);
}
.cedro-subtitle {
  font-size: var(--cedro-type-subtitle-size);
  line-height: var(--cedro-type-subtitle-lh);
  font-weight: 500;
}

.cedro-body-lg,
.cedro-body,
.cedro-body-sm,
.cedro-meta,
.cedro-label {
  font-family: var(--cedro-font-sans);
  margin: 0;
}
.cedro-body-lg {
  font-size: var(--cedro-type-body-lg-size);
  line-height: var(--cedro-type-body-lg-lh);
  font-weight: var(--cedro-type-body-lg-weight);
  color: var(--cedro-fg-2);
}
.cedro-body {
  font-size: var(--cedro-type-body-size);
  line-height: var(--cedro-type-body-lh);
  font-weight: var(--cedro-type-body-weight);
  color: var(--cedro-fg-2);
}
.cedro-body-sm {
  font-size: var(--cedro-type-body-sm-size);
  line-height: var(--cedro-type-body-sm-lh);
  color: var(--cedro-fg-3);
}
.cedro-meta {
  font-size: var(--cedro-type-meta-size);
  line-height: var(--cedro-type-meta-lh);
  color: var(--cedro-fg-3);
  font-weight: 400;
}
.cedro-label {
  font-size: var(--cedro-type-label-size);
  font-weight: var(--cedro-type-label-weight);
  letter-spacing: var(--cedro-type-label-ls);
  text-transform: uppercase;
  color: var(--cedro-fg-accent);
}

/* Gold divider — the only decorative element that recurs */
.cedro-divider-gold {
  width: 36px;
  height: 2px;
  background: var(--cedro-gold);
  border: none;
  margin: 28px 0;
  display: block;
}