/* ============================================================
   B28 EDUCAÇÃO — DESIGN SYSTEM
   Drop-in tokens + base styles. Import this file, then load:
   - Plus Jakarta Sans (headlines)
   - Inter (body)
   - Source Serif 4 (editorial / quotes)  [optional]
   - Material Symbols Outlined (icons)
   ============================================================ */

/* ---- Google Fonts (or self-host) ----
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Inter:wght@100..900&family=Source+Serif+4:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
*/

:root {
  /* ===== COLOR — Primary (forest green) ===== */
  --primary:                  #0e6624;
  --on-primary:               #ffffff;
  --primary-container:        #2f803a;
  --on-primary-container:     #deffd8;
  --primary-fixed:            #a2f6a2;
  --primary-fixed-dim:        #86d988;
  --on-primary-fixed:         #002106;
  --on-primary-fixed-variant: #005319;
  --inverse-primary:          #86d988;
  --surface-tint:             #186d29;

  /* ===== COLOR — Secondary (olive) ===== */
  --secondary:                  #416924;
  --on-secondary:               #ffffff;
  --secondary-container:        #beee99;
  --on-secondary-container:     #456d28;
  --secondary-fixed:            #c1f09c;
  --secondary-fixed-dim:        #a6d482;
  --on-secondary-fixed:         #0b2000;
  --on-secondary-fixed-variant: #2a500d;

  /* ===== COLOR — Tertiary (neutral warm grey) ===== */
  --tertiary:                  #585857;
  --on-tertiary:               #ffffff;
  --tertiary-container:        #717070;
  --on-tertiary-container:     #f8f5f4;
  --tertiary-fixed:            #e5e2e1;
  --tertiary-fixed-dim:        #c8c6c5;
  --on-tertiary-fixed:         #1c1b1b;
  --on-tertiary-fixed-variant: #474746;

  /* ===== COLOR — Error ===== */
  --error:               #ba1a1a;
  --on-error:            #ffffff;
  --error-container:     #ffdad6;
  --on-error-container:  #93000a;

  /* ===== COLOR — Surfaces & neutrals ===== */
  --background:                #faf9f9;
  --on-background:             #1a1c1c;
  --surface:                   #faf9f9;
  --on-surface:                #1a1c1c;
  --surface-variant:           #e3e2e2;
  --on-surface-variant:        #40493e;
  --surface-bright:            #faf9f9;
  --surface-dim:               #dadada;
  --surface-container-lowest:  #ffffff;
  --surface-container-low:     #f4f3f3;
  --surface-container:         #eeeeed;
  --surface-container-high:    #e9e8e8;
  --surface-container-highest: #e3e2e2;
  --inverse-surface:           #2f3131;
  --inverse-on-surface:        #f1f0f0;
  --outline:                   #707a6d;
  --outline-variant:           #bfcabb;

  /* ===== RADIUS ===== */
  --radius-default: 1rem;   /* cards, inputs, tiles */
  --radius-lg:      2rem;   /* large cards, modals */
  --radius-xl:      3rem;   /* hero panels */
  --radius-full:    9999px; /* pills, buttons, avatars */

  /* ===== TYPE ===== */
  --font-headline: 'Plus Jakarta Sans', sans-serif;
  --font-body:     'Inter', sans-serif;
  --font-serif:    'Source Serif 4', serif;

  /* ===== ELEVATION (signature green-tinted shadows) ===== */
  --shadow-sm: 0 4px 16px rgba(14,102,36,0.10);
  --shadow-md: 0 12px 40px rgba(14,102,36,0.15);
  --shadow-lg: 0 24px 64px rgba(14,102,36,0.20);
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--background);
  color: var(--on-surface);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.font-headline { font-family: var(--font-headline); letter-spacing: -0.01em; }
.font-serif    { font-family: var(--font-serif); }
::selection { background: var(--primary-fixed); color: var(--on-primary-fixed); }
html { scroll-behavior: smooth; }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ============================================================
   SIGNATURE MOTIFS
   ============================================================ */

/* Arched mask — the B28 portrait/image shape */
.arched-mask { border-radius: 500px 500px 0 0; }

/* Glass layer (light) */
.glass-layer {
  background: rgba(250,249,249,0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* Glass layer (on dark) */
.glass-dark {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Striped placeholders for imagery */
.img-placeholder {
  background-color: #deffd8;
  background-image:
    linear-gradient(135deg, rgba(14,102,36,0.08), rgba(14,102,36,0.18)),
    repeating-linear-gradient(45deg, rgba(14,102,36,0.06) 0, rgba(14,102,36,0.06) 2px, transparent 2px, transparent 12px);
}
.img-placeholder-dark {
  background-color: #0e6624;
  background-image:
    linear-gradient(135deg, rgba(14,102,36,0.65), rgba(14,102,36,0.92)),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 2px, transparent 2px, transparent 14px);
}
.img-placeholder-label {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
}

/* Eyebrow / kicker label */
.eyebrow {
  font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase;
  font-weight: 700; color: var(--secondary);
}

/* Animations */
@keyframes pulse-dot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.85); } }
.pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }
@keyframes float-slow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.float-slow { animation: float-slow 6s ease-in-out infinite; }

/* ============================================================
   COMPONENTS
   ============================================================ */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-headline); font-weight: 700; font-size: 15px;
  padding: 14px 28px; border-radius: var(--radius-full);
  border: 0; cursor: pointer; text-decoration: none; transition: all .25s;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { box-shadow: 0 8px 32px rgba(14,102,36,0.30); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--on-surface); border: 2px solid var(--outline-variant); }
.btn-outline:hover { background: var(--surface-container-low); }
.btn-on-primary { background: #fff; color: var(--primary); }
.btn-on-primary:hover { transform: scale(1.05); }

/* Pill / chip */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700;
  padding: 6px 12px; border-radius: var(--radius-full);
  background: var(--secondary-container); color: var(--on-secondary-container);
}

/* Card */
.card {
  background: var(--surface-container-lowest);
  border: 1px solid color-mix(in srgb, var(--outline-variant) 50%, transparent);
  border-radius: var(--radius-default);
  padding: 28px;
}
.card-feature { border: 2px solid var(--primary); box-shadow: var(--shadow-sm); }

/* Inputs */
.input {
  width: 100%; font-family: var(--font-body); font-size: 14px;
  background: var(--surface-container-low);
  border: 1px solid color-mix(in srgb, var(--outline-variant) 60%, transparent);
  border-radius: var(--radius-full); padding: 12px 20px;
}
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14,102,36,0.12); }

/* ============================================================
   TAILWIND (CDN) CONFIG — paste into <script> after the CDN tag
   ============================================================
tailwind.config = {
  theme: { extend: {
    colors: {
      "primary":"#0e6624","on-primary":"#ffffff","primary-container":"#2f803a","on-primary-container":"#deffd8",
      "primary-fixed":"#a2f6a2","primary-fixed-dim":"#86d988","on-primary-fixed":"#002106","on-primary-fixed-variant":"#005319",
      "inverse-primary":"#86d988","surface-tint":"#186d29",
      "secondary":"#416924","on-secondary":"#ffffff","secondary-container":"#beee99","on-secondary-container":"#456d28",
      "secondary-fixed":"#c1f09c","secondary-fixed-dim":"#a6d482","on-secondary-fixed":"#0b2000","on-secondary-fixed-variant":"#2a500d",
      "tertiary":"#585857","on-tertiary":"#ffffff","tertiary-container":"#717070","on-tertiary-container":"#f8f5f4",
      "tertiary-fixed":"#e5e2e1","tertiary-fixed-dim":"#c8c6c5","on-tertiary-fixed":"#1c1b1b","on-tertiary-fixed-variant":"#474746",
      "error":"#ba1a1a","on-error":"#ffffff","error-container":"#ffdad6","on-error-container":"#93000a",
      "background":"#faf9f9","on-background":"#1a1c1c","surface":"#faf9f9","on-surface":"#1a1c1c",
      "surface-variant":"#e3e2e2","on-surface-variant":"#40493e","surface-bright":"#faf9f9","surface-dim":"#dadada",
      "surface-container-lowest":"#ffffff","surface-container-low":"#f4f3f3","surface-container":"#eeeeed",
      "surface-container-high":"#e9e8e8","surface-container-highest":"#e3e2e2",
      "inverse-surface":"#2f3131","inverse-on-surface":"#f1f0f0","outline":"#707a6d","outline-variant":"#bfcabb"
    },
    borderRadius: { "DEFAULT":"1rem","lg":"2rem","xl":"3rem","full":"9999px" },
    fontFamily: { "headline":["Plus Jakarta Sans"],"body":["Inter"],"serif":["Source Serif 4"] }
  } }
};
   ============================================================ */