/* ============================================================
   Practical AI — Colors & Type
   Source of truth: practical-ai-web/index.html + hub custom.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700;1,900&display=swap');

:root {
  /* -------- BRAND COLORS (raw) -------- */
  --cream:        #FAF3EB;  /* page background */
  --cream-dark:   #F0E6D8;  /* alt sections / soft surface */
  --brown:        #2C1810;  /* primary text, dark surfaces */
  --brown-light:  #6B5044;  /* secondary text */
  --brown-muted:  #9A8578;  /* tertiary / eyebrow text */
  --coral:        #E85D4A;  /* accent, CTAs, links */
  --coral-dark:   #e44832;
  --coral-darker: #e03e27;
  --coral-light:  #eb7262;
  --coral-lighter:#ed7d6e;
  --coral-lightest:#f3a89f;
  --white:        #ffffff;

  /* Accent bar colours used on hero tiles */
  --accent-ochre: #B8860B;
  --accent-sage:  #5D7A6E;

  --border:        rgba(44, 24, 16, 0.08);
  --border-strong: rgba(44, 24, 16, 0.15);

  /* -------- SEMANTIC TOKENS -------- */
  --bg:            var(--cream);
  --bg-alt:        var(--cream-dark);
  --bg-surface:    var(--white);
  --bg-inverse:    var(--brown);

  --fg:            var(--brown);
  --fg-secondary:  var(--brown-light);
  --fg-muted:      var(--brown-muted);
  --fg-on-dark:    var(--cream);
  --fg-on-dark-muted: rgba(250, 243, 235, 0.55);
  --fg-on-dark-faint: rgba(250, 243, 235, 0.3);

  --accent:        var(--coral);
  --accent-hover:  var(--coral-dark);
  --link:          var(--coral);

  /* -------- TYPE FAMILIES -------- */
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* -------- TYPE SCALE (fluid, hero-first) -------- */
  --type-display:  clamp(2.8rem, 6vw, 4.5rem);   /* hero h1 */
  --type-h1:       clamp(2rem, 4vw, 3rem);       /* section hero */
  --type-h2:       clamp(1.8rem, 3.5vw, 2.6rem); /* section title */
  --type-h3:       clamp(1.5rem, 2.5vw, 2rem);
  --type-h4:       1.1rem;
  --type-body-lg:  1.15rem;
  --type-body:     1rem;
  --type-body-sm:  0.95rem;
  --type-caption:  0.88rem;
  --type-micro:    0.82rem;
  --type-eyebrow:  0.78rem;

  /* -------- LINE HEIGHTS -------- */
  --lh-tight:   1.08;
  --lh-snug:    1.2;
  --lh-normal:  1.6;
  --lh-loose:   1.7;

  /* -------- LETTER SPACING -------- */
  --tracking-display: -0.04em;
  --tracking-tight:   -0.03em;
  --tracking-snug:    -0.02em;
  --tracking-wide:    0.06em;  /* eyebrow / uppercase */

  /* -------- WEIGHTS -------- */
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:600;
  --w-bold:    700;
  --w-xbold:   800;
  --w-black:   900;

  /* -------- SPACING (8px rhythm) -------- */
  --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;
  --space-20: 80px;
  --space-24: 100px;
  --space-28: 120px;

  /* -------- RADII -------- */
  --radius-xs: 4px;   /* tag pills, inline chips */
  --radius-sm: 6px;   /* sidebar items */
  --radius-md: 8px;   /* buttons, inputs */
  --radius-lg: 10px;  /* tiles, small cards */
  --radius-xl: 12px;  /* cards, price panels */
  --radius-pill: 999px;

  /* -------- SHADOWS -------- */
  --shadow-tile:  0 4px 20px rgba(44, 24, 16, 0.06);
  --shadow-card:  0 6px 24px rgba(44, 24, 16, 0.08);
  --shadow-lift:  0 12px 40px rgba(44, 24, 16, 0.12);

  /* -------- LAYOUT -------- */
  --container: 1100px;
  --reading: 780px;

  /* -------- MOTION -------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 0.15s;
  --dur-base: 0.2s;
  --dur-slow: 0.4s;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply .pai-type or scope these to opt-in containers.
   ============================================================ */

body, .pai-body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  font-size: var(--type-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

.pai-h1, .pai-hero-title {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--type-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
}

.pai-h1 em, .pai-hero-title em { font-style: italic; color: var(--accent); }

.pai-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--type-h2);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.pai-h3 {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--type-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}

.pai-h4 {
  font-weight: var(--w-xbold);
  font-size: var(--type-h4);
  line-height: 1.3;
  color: var(--fg);
}

.pai-body-lg { font-size: var(--type-body-lg); color: var(--fg-secondary); line-height: var(--lh-loose); }
.pai-body    { font-size: var(--type-body);    color: var(--fg-secondary); line-height: var(--lh-loose); }
.pai-body-sm { font-size: var(--type-body-sm); color: var(--fg-secondary); line-height: var(--lh-normal); }
.pai-caption { font-size: var(--type-caption); color: var(--fg-muted);     line-height: var(--lh-normal); }
.pai-micro   { font-size: var(--type-micro);   color: var(--fg-muted); }

.pai-eyebrow {
  font-size: var(--type-eyebrow);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--accent);
}

.pai-eyebrow-neutral { color: var(--fg-muted); }

.pai-link { color: var(--link); text-decoration: none; }
.pai-link:hover { color: var(--coral-dark); }

.pai-code {
  font-family: var(--font-mono);
  font-size: 90%;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-xs);
}