/* ============================================================
   Climate Chorus — Colors & Type
   Foundational design tokens. Import this in any artifact:
     <link rel="stylesheet" href="colors_and_type.css">
   ============================================================ */

/* --- Typeface ---------------------------------------------------
   Hanken Grotesk is used as a SUBSTITUTE for the brand wordmark/UI
   font (the original font file was not provided). It is a warm,
   highly legible humanist grotesque that matches the friendly,
   clear feel of the brand. Swap the @font-face/family if the real
   font is supplied.                                              */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300..800;1,400..600&display=swap');

:root {
  /* ---------- Brand neutrals (Tideline) ----------
     Warm "sand" canvas. Lightest variant chosen as the page background. */
  --sand:         #FBF8F1;  /* PRIMARY app/page background — lightest warm sand */
  --sand-raised:  #FFFFFF;  /* raised surface — cards, sheets */
  --sand-sunken:  #F1EBDD;  /* quiet/sunken fill — secondary rows, tiles */
  --sand-line:    #EBE3D2;  /* hairline on sand */
  /* legacy aliases (kept so older references resolve) */
  --paper:        #FBF8F1;
  --paper-2:      #FFFFFF;
  --paper-3:      #F1EBDD;
  --paper-line:   #EBE3D2;

  /* ---------- Deep water (the focus surface — replaces black) ---------- */
  --water:        #173B43;  /* deep blue-teal — the one dark focus card */
  --water-2:      #1E4A53;  /* raised deep water */
  --water-line:   rgba(246,236,220,0.12); /* hairline on water */
  --ink:          #173B43;  /* alias: "ink"/focus surface is deep water, not black */
  --ink-2:        #1E4A53;
  --ink-line:     rgba(246,236,220,0.12);

  /* ---------- Driftwood (warm structural neutral) ----------
     The brand's warm "ink" on light surfaces: borders, quiet fills, icons,
     and secondary text. NOT an accent — never on the deep-water card. */
  --driftwood:        #8A6F52;
  --driftwood-deep:   #5A452F;
  --driftwood-soft:   #E4D6C2;
  --clay:             #5A452F;  /* alias */
  --clay-2:           #3A2E22;

  /* ---------- Primary accent ----------
     Jewel CORAL leads — the CTA / action colour (the bright reef fish). */
  --coral:        #FB6F5C;  /* PRIMARY — calls to action, active states */
  --coral-deep:   #9E3525;  /* coral text on sand, pressed state */
  --coral-soft:   #FCD9CC;  /* coral tint fill on sand */

  /* ---------- Jewel category accents (wayfinding, not decoration) ----------
     Each colour encodes a CONTENT CATEGORY. Use small (dot/tag) and ONE per
     screen — never as decoration, never competing with the coral CTA. */
  --energy:       #E8A93F;  --energy-soft:    #F5E2B6;  --energy-deep:    #8A4F12; /* power & heating */
  --home:         #FB6F5C;  --home-soft:      #FCD9CC;  --home-deep:      #9E3525; /* everyday warmth (= coral) */
  --water-cat:    #2E8FB0;  --water-cat-soft: #CFE6EE;  --water-cat-deep: #1C5A72; /* taps, rain, reuse */
  --community:    #B4A1D1;  --community-soft: #E2D9EC;  --community-deep: #5B4A73; /* voice & local */
  --nature:       #15B8A6;  --nature-soft:    #C2EBE4;  --nature-deep:    #0A5C53; /* sea & garden (reef) */
  /* reef turquoise also serves as the celebration / success accent */
  --reef:         #15B8A6;  --reef-soft:      #C2EBE4;  --reef-deep:      #0A5C53;

  /* ---------- Text roles ---------- */
  --fg-1:         #2E2116;             /* primary text on sand — warm espresso */
  --fg-2:         #4A3A29;             /* secondary / body */
  --fg-3:         #6A5138;             /* tertiary / meta, timestamps (darkened for legibility) */
  --on-dark-1:    #F6ECDC;             /* primary text on deep water — warm ivory */
  --on-dark-2:    rgba(246,236,220,0.80); /* secondary on water */
  --on-dark-3:    rgba(246,236,220,0.60); /* tertiary on water */
  --on-coral:     #FFFFFF;             /* text on coral button */

  /* ---------- Status ---------- */
  --positive:     #0A5C53;  /* reef turquoise — confirmations / success */
  --warning:      #E8A93F;  /* energy amber */
  --danger:       #C2543B;

  /* ---------- Type family ---------- */
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---------- Type scale (rem @ 16px base) ---------- */
  --text-display: 2.0rem;   /* 32 — "Morning, Sam." greeting */
  --text-h1:      1.5rem;   /* 24 — card headlines */
  --text-h2:      1.25rem;  /* 20 — section titles */
  --text-h3:      1.0625rem;/* 17 — list/row titles */
  --text-body:    1rem;     /* 16 — body copy */
  --text-sm:      0.875rem; /* 14 — supporting */
  --text-xs:      0.75rem;  /* 12 — labels, pills, meta */

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:  1.12;
  --leading-snug:   1.28;
  --leading-normal: 1.5;

  --tracking-tight: -0.02em;  /* display & headlines */
  --tracking-flat:  -0.01em;  /* body */
  --tracking-wide:   0.06em;  /* uppercase micro-labels */

  /* ---------- Radii ---------- */
  --radius-xs:  8px;
  --radius-sm:  12px;
  --radius-md:  18px;   /* default card radius */
  --radius-lg:  26px;   /* hero / feature cards */
  --radius-pill: 999px; /* buttons, pills, nav, chips */

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  /* ---------- Elevation ---------- */
  --shadow-sm: 0 1px 2px rgba(26,26,26,0.05);
  --shadow-md: 0 6px 20px rgba(26,26,26,0.07);
  --shadow-lg: 0 18px 48px rgba(26,26,26,0.12);
  --shadow-dark: 0 14px 40px rgba(26,26,26,0.28); /* ink cards on cream */

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */
}

/* ============================================================
   Semantic element styles — apply with class or use as reference
   ============================================================ */
.cc-display {
  font-family: var(--font-sans);
  font-size: var(--text-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.cc-h1 {
  font-family: var(--font-sans);
  font-size: var(--text-h1);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.cc-h2 {
  font-family: var(--font-sans);
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.cc-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}
.cc-body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-flat);
  color: var(--fg-1);
}
.cc-supporting {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}
.cc-meta {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--fg-3);
}
.cc-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-2);
}