/**
 * Senti Design System — CSS Custom Properties
 * "The Serene Editorial"
 *
 * Fonts loaded via Google Fonts:
 *   Plus Jakarta Sans: 700, 800
 *   Manrope: 400, 500, 600, 700
 *
 * Usage:
 *   @import url('colors_and_type.css');
 *   (then reference vars as var(--color-bg), etc.)
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@700;800&family=Manrope:wght@400;500;600;700&display=swap');

/* ─────────────────────────────────────────────
   COLOR TOKENS
   ───────────────────────────────────────────── */

:root {
  /* ── Backgrounds ── */
  --color-bg:            #fbf9f4;   /* Base screen background — never pure white */
  --color-surface-1:     #f5f4ed;   /* Container, non-interactive cards */
  --color-surface-2:     #efeee6;   /* Deeper containers */
  --color-surface-3:     #e8e9e0;   /* Muted sections */
  --color-surface-4:     #e2e3d9;   /* Input fields, progress bar backgrounds */
  --color-white:         #ffffff;   /* Elevated / interactive cards only */

  /* ── Brand Primary (Sage Green) ── */
  --color-primary:           #3d6841;   /* Primary button, active icon */
  --color-primary-container: #bfefbd;   /* Active tab, chips, highlight cards */
  --color-primary-deep:      #1e4824;   /* Text on primary container */
  --color-primary-light:     #e4ffe0;   /* Text on primary dark bg */

  /* ── Secondary / Accent ── */
  --color-secondary-container: #eee1cc;  /* Secondary button, premium cards */
  --color-tertiary-container:  #f8f0e3;  /* Accent surfaces */
  --color-warm-accent:         #c4a86a;  /* Energy / gold accent */

  /* ── Text ── */
  --color-text-title:     #31332c;   /* Warm black — headlines & titles */
  --color-text-body:      #5e6058;   /* Secondary text, body */
  --color-text-label:     #797c73;   /* Eyebrow labels, placeholders */
  --color-text-ghost:     #b1b3a9;   /* Ghost / disabled text */

  /* ── Semantic ── */
  --color-error:          #9e422c;   /* Error, stress indicator */
  --color-border-ghost:   rgba(177, 179, 169, 0.15);  /* Rare subtle borders */

  /* ── Shadows (always warm, never grey) ── */
  --shadow-float:    0 8px 24px -4px rgba(103, 94, 77, 0.08);  /* Floating white cards */
  --shadow-subtle:   0 4px 16px 0px rgba(103, 94, 77, 0.06);   /* Subtle lift */
  --shadow-nav:      0 -4px 20px 0px rgba(103, 94, 77, 0.04);  /* Nav bar top shadow */

  /* ── Plant Accent Colors ── */
  --plant-bambu-glow:    #bfefbd;
  --plant-bambu-accent:  #3d6841;
  --plant-girasol-glow:  #fef3e2;
  --plant-girasol-accent:#8a5010;
  --plant-lavanda-glow:  #f0ebf8;
  --plant-lavanda-accent:#5a4a8a;
  --plant-cactus-glow:   #e8f4ec;
  --plant-cactus-accent: #3d6841;
  --plant-helecho-glow:  #e6f0e6;
  --plant-helecho-accent:#3a6030;

  /* ─────────────────────────────────────────────
     TYPOGRAPHY TOKENS
     ───────────────────────────────────────────── */

  /* Font Families */
  --font-display:  'Plus Jakarta Sans', sans-serif;
  --font-body:     'Manrope', sans-serif;

  /* Font Weights */
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;

  /* ── Type Scale ── */

  /* Display — hero moments */
  --type-display-size:    56px;
  --type-display-weight:  800;
  --type-display-lh:      1.05;
  --type-display-ls:      -1.5px;
  --type-display-font:    var(--font-display);

  /* Screen title — main header of each screen */
  --type-title-size:      36px;
  --type-title-weight:    800;
  --type-title-lh:        1.15;
  --type-title-ls:        -0.8px;
  --type-title-font:      var(--font-display);

  /* Title large — e.g. gratitud hero */
  --type-title-lg-size:   44px;
  --type-title-lg-weight: 800;
  --type-title-lg-lh:     1.15;
  --type-title-lg-ls:     -1.2px;
  --type-title-lg-font:   var(--font-display);

  /* Card title */
  --type-card-title-size:   20px;
  --type-card-title-weight: 800;
  --type-card-title-lh:     1.3;
  --type-card-title-ls:     -0.3px;
  --type-card-title-font:   var(--font-display);

  /* Quote / italic editorial */
  --type-quote-size:   17px;
  --type-quote-weight: 700;
  --type-quote-lh:     1.55;
  --type-quote-ls:     -0.2px;
  --type-quote-font:   var(--font-display);

  /* Brand wordmark */
  --type-brand-size:   18px;
  --type-brand-weight: 700;
  --type-brand-ls:     -0.3px;
  --type-brand-font:   var(--font-display);

  /* Body regular */
  --type-body-size:    16px;
  --type-body-weight:  400;
  --type-body-lh:      1.6;
  --type-body-font:    var(--font-body);

  /* Body small */
  --type-body-sm-size:   14px;
  --type-body-sm-weight: 400;
  --type-body-sm-lh:     1.55;
  --type-body-sm-font:   var(--font-body);

  /* Body medium */
  --type-body-med-size:   14px;
  --type-body-med-weight: 500;
  --type-body-med-font:   var(--font-body);

  /* Body semibold */
  --type-body-sb-size:   14px;
  --type-body-sb-weight: 600;
  --type-body-sb-font:   var(--font-body);

  /* Eyebrow label */
  --type-label-size:      10px;
  --type-label-weight:    700;
  --type-label-ls:        0.15em;
  --type-label-font:      var(--font-body);
  --type-label-transform: uppercase;

  /* Stat number */
  --type-stat-size:   30px;
  --type-stat-weight: 800;
  --type-stat-ls:     -0.6px;
  --type-stat-font:   var(--font-display);

  /* Tab label */
  --type-tab-size:   11px;
  --type-tab-weight: 500;
  --type-tab-font:   var(--font-body);

  /* ─────────────────────────────────────────────
     SPACING TOKENS
     ───────────────────────────────────────────── */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;

  --screen-pad-h:      24px;  /* Horizontal padding for all screens */
  --section-gap:       32px;  /* Between major sections */
  --section-gap-lg:    48px;  /* Between large sections */
  --card-pad:          24px;  /* Card internal padding */
  --card-pad-sm:       22px;
  --list-item-gap:     16px;  /* Between list items (no dividers) */

  /* ─────────────────────────────────────────────
     BORDER RADIUS TOKENS
     ───────────────────────────────────────────── */

  --radius-sm:     12px;   /* Small cards, inputs */
  --radius-md:     16px;   /* Medium cards */
  --radius-lg:     20px;   /* Large cards */
  --radius-xl:     24px;   /* Hero cards, containers */
  --radius-pill:   9999px; /* Buttons, chips, tags */
  --radius-circle: 50%;    /* Icon containers */
}

/* ─────────────────────────────────────────────
   SEMANTIC TYPE CLASSES
   ───────────────────────────────────────────── */

.senti-display {
  font-family: var(--type-display-font);
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  line-height: var(--type-display-lh);
  letter-spacing: var(--type-display-ls);
  color: var(--color-text-title);
}

.senti-title {
  font-family: var(--type-title-font);
  font-size: var(--type-title-size);
  font-weight: var(--type-title-weight);
  line-height: var(--type-title-lh);
  letter-spacing: var(--type-title-ls);
  color: var(--color-text-title);
}

.senti-title-lg {
  font-family: var(--type-title-lg-font);
  font-size: var(--type-title-lg-size);
  font-weight: var(--type-title-lg-weight);
  line-height: var(--type-title-lg-lh);
  letter-spacing: var(--type-title-lg-ls);
  color: var(--color-text-title);
}

.senti-card-title {
  font-family: var(--type-card-title-font);
  font-size: var(--type-card-title-size);
  font-weight: var(--type-card-title-weight);
  line-height: var(--type-card-title-lh);
  letter-spacing: var(--type-card-title-ls);
  color: var(--color-text-title);
}

.senti-quote {
  font-family: var(--type-quote-font);
  font-size: var(--type-quote-size);
  font-weight: var(--type-quote-weight);
  line-height: var(--type-quote-lh);
  letter-spacing: var(--type-quote-ls);
  font-style: italic;
  color: var(--color-primary-deep);
}

.senti-body {
  font-family: var(--type-body-font);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
  color: var(--color-text-body);
}

.senti-body-sm {
  font-family: var(--type-body-sm-font);
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-body-sm-weight);
  line-height: var(--type-body-sm-lh);
  color: var(--color-text-body);
}

.senti-label {
  font-family: var(--type-label-font);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-ls);
  text-transform: var(--type-label-transform);
  color: var(--color-text-label);
}

.senti-stat {
  font-family: var(--type-stat-font);
  font-size: var(--type-stat-size);
  font-weight: var(--type-stat-weight);
  letter-spacing: var(--type-stat-ls);
}