/* =====================================================================
   CEREBRUM — Colors & Type
   Editorial fashion of the 90s · digital culture · creative directory
   ===================================================================== */

/* ---------- FONTS ---------- */
@font-face {
  font-family: "TT Bells";
  src: url("fonts/TTBellsTrial-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Montserrat is loaded via Google Fonts in HTML:
   <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet"> */

:root {
  /* =================================================================
     COLOR — RAW PALETTE (from cerebrum paleta de colores.jpg)
     ================================================================= */
  --cb-pink:    #fd99c6;   /* signature — logotype, hero accents */
  --cb-yellow:  #fffaa4;   /* highlight, secondary surface */
  --cb-blue:    #c7e7f5;   /* tertiary surface, calm tone */
  --cb-grey:    #e4e4e4;   /* off-white background, panels */
  --cb-black:   #000000;   /* primary text & ink */
  --cb-white:   #ffffff;   /* paper */

  /* Soft tints for hover / pressed / muted backgrounds */
  --cb-pink-50:   #fff0f7;
  --cb-yellow-50: #fffde6;
  --cb-blue-50:   #eef7fc;

  /* =================================================================
     SEMANTIC — FOREGROUND
     ================================================================= */
  --fg-1: #000000;          /* primary text, headings */
  --fg-2: #1a1a1a;          /* body text */
  --fg-3: #555555;          /* secondary copy, captions */
  --fg-4: #8a8a8a;          /* tertiary / metadata */
  --fg-disabled: #b8b8b8;
  --fg-on-dark: #ffffff;
  --fg-on-pink: #000000;
  --fg-link: #000000;       /* underline-only links */

  /* =================================================================
     SEMANTIC — BACKGROUND / SURFACES
     ================================================================= */
  --bg-paper:      #ffffff; /* default page */
  --bg-soft:       #e4e4e4; /* off-white panel */
  --bg-ink:        #000000; /* inverse / hero blocks */
  --bg-accent:     #fd99c6; /* pink callout */
  --bg-highlight:  #fffaa4; /* yellow callout */
  --bg-cool:       #c7e7f5; /* blue callout */

  /* =================================================================
     SEMANTIC — BORDERS & RULES
     ================================================================= */
  --border-ink:     #000000;          /* hairline 1px black — editorial */
  --border-soft:    #cfcfcf;
  --border-faint:   #e4e4e4;
  --rule-thick:     2px solid #000;
  --rule-hair:      1px solid #000;

  /* =================================================================
     TYPE — FAMILIES
     ================================================================= */
  --font-display:  "TT Bells", "Playfair Display", "Times New Roman", serif;
  --font-body:     "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "Courier New", monospace;

  /* =================================================================
     TYPE — SCALE  (editorial: very large display, small confident body)
     ================================================================= */
  --fs-display-1: clamp(72px, 12vw, 200px);
  --fs-display-2: clamp(56px, 9vw, 140px);
  --fs-h1:        clamp(40px, 6vw, 88px);
  --fs-h2:        clamp(32px, 4.4vw, 64px);
  --fs-h3:        28px;
  --fs-h4:        20px;
  --fs-body:      15px;
  --fs-small:     13px;
  --fs-micro:     11px;     /* uppercase eyebrows */

  --lh-tight:   1.04;       /* display lockups */
  --lh-display: 1.04;
  --lh-heading: 1.1;
  --lh-body:    1.55;

  --tracking-display: -0.06em;
  --tracking-body:    0;
  --tracking-eyebrow: 0.18em;  /* 90s editorial uppercase */
  --tracking-button:  0.12em;

  /* =================================================================
     SPACING / RADII / MOTION
     ================================================================= */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --radius-0: 0;            /* default — sharp editorial */
  --radius-sm: 2px;
  --radius-pill: 999px;     /* tags, chips, capsule buttons */

  --shadow-sm: 0 1px 0 #000;                /* offset block */
  --shadow-md: 4px 4px 0 #000;              /* hard editorial shadow */
  --shadow-lg: 8px 8px 0 #000;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* =====================================================================
   SEMANTIC ELEMENT STYLES
   ===================================================================== */
html { color: var(--fg-1); background: var(--bg-paper); }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  -webkit-font-smoothing: antialiased;
}

.display-1, h1.display {
  font-family: var(--font-display);
  font-size: var(--fs-display-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  font-weight: 400;
}
.display-2 {
  font-family: var(--font-display);
  font-size: var(--fs-display-2);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  font-weight: 400;
}

h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h1); line-height: var(--lh-heading); color: var(--fg-1); }
h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-heading); color: var(--fg-1); }
h3 { font-family: var(--font-body);    font-weight: 600; font-size: var(--fs-h3); line-height: 1.25; color: var(--fg-1); }
h4 { font-family: var(--font-body);    font-weight: 600; font-size: var(--fs-h4); line-height: 1.3; color: var(--fg-1); text-transform: uppercase; letter-spacing: .04em; }

p  { font-size: var(--fs-body); color: var(--fg-2); }
small, .small { font-size: var(--fs-small); color: var(--fg-3); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

a {
  color: var(--fg-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: opacity var(--dur-fast) var(--ease);
}
a:hover { opacity: .6; }

code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 13px;
}