/**
 * Phil.st Design System — Colors & Typography (Light Theme)
 * ==========================================================
 * Sub-brand accent usage (adjusted for light background legibility):
 *   .street  → --teal   #5fb3b3
 *   .stories → --coral  #e85555
 *   .studio  → --yellow #c9a800
 *   NL/CTA   → --cyan   #0099bb
 */

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

/* ─────────────────────────────────────────
   BASE COLOR TOKENS
   ───────────────────────────────────────── */
:root {
  --night:  #0b1c26;
  --navy:   #0a243e;
  --cream:  #f5f3e8;
  --bg-alt: #ede9d4;

  /* Sub-brand — darkened for light background legibility */
  --teal:   #5fb3b3;   /* .street (unchanged) */
  --coral:  #e85555;   /* .stories */
  --yellow: #c9a800;   /* .studio */
  --cyan:   #0099bb;   /* NL badge / newsletter CTA */

  /* Surfaces (light) */
  --surface:       rgba(11, 28, 38, 0.03);
  --surface-hover: rgba(11, 28, 38, 0.05);

  /* Borders (light) */
  --border:       rgba(11, 28, 38, 0.10);
  --border-light: rgba(11, 28, 38, 0.06);
}

/* ─────────────────────────────────────────
   SEMANTIC COLOR TOKENS (Light Theme)
   ───────────────────────────────────────── */
:root {
  --color-bg:           var(--cream);
  --color-bg-secondary: var(--bg-alt);
  --color-bg-inverse:   var(--night);

  --color-text:         var(--night);
  --color-text-muted:   rgba(11, 28, 38, 0.50);
  --color-text-inverse: var(--cream);

  --color-street:  var(--teal);
  --color-stories: var(--coral);
  --color-studio:  var(--yellow);
  --color-nl:      var(--cyan);
  --color-cta:     var(--night);
}

/* ─────────────────────────────────────────
   FONT FAMILY TOKENS
   ───────────────────────────────────────── */
:root {
  --font-display: 'Barlow Condensed', sans-serif;
  --font-heading: 'Barlow', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'DM Mono', monospace;
}

/* ─────────────────────────────────────────
   TYPE SCALE
   ───────────────────────────────────────── */
:root {
  --text-headline: 128px;
  --text-h1:       clamp(40px, 6vw, 72px);
  --text-h2:       26px;
  --text-body:     17px;
  --text-small:    14px;
  --text-label:    11px;
  --text-mono:     12px;

  --weight-black:     900;
  --weight-extrabold: 800;
  --weight-bold:      700;
  --weight-semibold:  600;
  --weight-medium:    500;
  --weight-regular:   400;
}

/* ─────────────────────────────────────────
   SPACING
   ───────────────────────────────────────── */
:root {
  --space-2:  8px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-28: 112px;

  --layout-gutter:    48px;
  --layout-max-width: 1400px;
  --radius-tag:       2px;
}

/* ─────────────────────────────────────────
   RESET
   ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-body);
  line-height: 1.6;
}

/* ─────────────────────────────────────────
   BRAND MARK SYSTEM
   ───────────────────────────────────────── */

/* PHIL.ST block — night bg, cream text (stands out on cream page) */
.brand-mark {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  display: inline-block;
  white-space: nowrap;
  background: var(--night);
  color: var(--cream);
  padding: 1.8px 5.4px 1px 4.2px;
}

/* Sub-brand mark: colored filled block + open-frame suffix */
.sub-brand-mark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}

.sub-brand-mark .sbm-fill {
  padding: 0.06em 0 0.06em 0.14em;
  display: inline-block;
  white-space: nowrap;
  border-right: none;
  color: var(--cream);
}

.sub-brand-mark .sbm-suffix {
  display: inline-block;
  white-space: nowrap;
  border-left: none;
  padding: 0.05em 0.2em 0.07em 0.14em;
}

/* Variants */
.sbm-street  .sbm-fill { background: var(--teal);   border: 2px solid var(--teal);   border-right: none; }
.sbm-street  .sbm-suffix { border: 2px solid var(--teal);   color: var(--teal); border-left: none; }

.sbm-stories .sbm-fill { background: var(--coral);  border: 2px solid var(--coral);  border-right: none; }
.sbm-stories .sbm-suffix { border: 2px solid var(--coral);  color: var(--coral); border-left: none; }

.sbm-studio  .sbm-fill { background: var(--yellow); border: 2px solid var(--yellow); border-right: none; }
.sbm-studio  .sbm-suffix { border: 2px solid var(--yellow); color: var(--yellow); border-left: none; }

.sbm-stenglin .sbm-fill { background: var(--night); border: 2px solid var(--night); border-right: none; }
.sbm-stenglin .sbm-suffix { border: 2px solid var(--night); color: var(--night); border-left: none; }

/* ─────────────────────────────────────────
   TAG CHIPS
   ───────────────────────────────────────── */
.tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border-radius: var(--radius-tag);
  display: inline-block;
  background: rgba(11, 28, 38, 0.07);
  color: var(--night);
}

.tag-street  { background: rgba(95,  179, 179, 0.15); color: #3a8a8a; }
.tag-stories { background: rgba(232,  85,  85, 0.12); color: var(--coral); }
.tag-studio  { background: rgba(201, 168,   0, 0.12); color: var(--yellow); }
.tag-nl      { background: rgba(  0, 153, 187, 0.08); color: var(--cyan); }

/* ─────────────────────────────────────────
   UTILITY
   ───────────────────────────────────────── */
.text-street  { color: var(--teal); }
.text-stories { color: var(--coral); }
.text-studio  { color: var(--yellow); }
.text-nl      { color: var(--cyan); }
.text-muted   { opacity: 0.5; }

.divider { border: none; border-top: 1px solid var(--border); }