/*
 * Benanti Portfolio — Colors & Typography
 * benantidesigns.com · Industrial Designer, Brooklyn NY
 * ─────────────────────────────────────────────────
 */

/* ── FONTS ─────────────────────────────────────── */
@import url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/style.css');
@import url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/style.css');

/* ── COLOR TOKENS ───────────────────────────────── */
:root {
  /* Core */
  --bp-black:         #171717;   /* Primary text, headings — warm near-black */
  --bp-white:         #ffffff;   /* Page background, card surfaces */
  --bp-true-black:    #000000;   /* Console/code contexts only */

  /* Neutral Scale */
  --bp-gray-900:      #171717;
  --bp-gray-600:      #4d4d4d;   /* Secondary / description text */
  --bp-gray-500:      #666666;   /* Tertiary / muted links */
  --bp-gray-400:      #808080;   /* Placeholder / disabled */
  --bp-gray-200:      #c8c8c8;   /* Subtle dividers */
  --bp-gray-100:      #ebebeb;   /* Borders, card outlines */
  --bp-gray-50:       #fafafa;   /* Subtle surface tint / card inner glow */

  /* Workflow Accents (functional only — not decorative) */
  --bp-ship-red:      #ff5b4f;   /* Ship / production step */
  --bp-preview-pink:  #de1d8d;   /* Preview / staging step */
  --bp-develop-blue:  #0a72ef;   /* Develop / local step */

  /* Console / Code */
  --bp-console-blue:  #0070f3;
  --bp-console-purple:#7928ca;
  --bp-console-pink:  #eb367f;

  /* Interactive */
  --bp-link:          #0072f5;
  --bp-focus:         hsla(212, 100%, 48%, 1);
  --bp-ring:          rgba(147, 197, 253, 0.5);

  /* Badge */
  --bp-badge-bg:      #ebf5ff;
  --bp-badge-text:    #0068d6;

  /* Overlays */
  --bp-overlay-bg:    hsla(0, 0%, 98%, 1);
  --bp-selection:     hsla(0, 0%, 95%, 1);

  /* ── SHADOWS / DEPTH ─────────────────────────── */
  /* Level 1 — shadow-as-border (replaces CSS border) */
  --bp-shadow-border:        rgba(0,0,0,0.08) 0px 0px 0px 1px;
  /* Level 1b — lighter ring for tabs, images */
  --bp-shadow-ring-light:    rgb(235,235,235) 0px 0px 0px 1px;
  /* Level 2 — card with minimal lift */
  --bp-shadow-card:          rgba(0,0,0,0.08) 0px 0px 0px 1px,
                             rgba(0,0,0,0.04) 0px 2px 2px;
  /* Level 3 — featured card, full stack */
  --bp-shadow-card-full:     rgba(0,0,0,0.08) 0px 0px 0px 1px,
                             rgba(0,0,0,0.04) 0px 2px 2px,
                             rgba(0,0,0,0.04) 0px 8px 8px -8px,
                             #fafafa 0px 0px 0px 1px inset;
  /* Focus accessibility */
  --bp-shadow-focus:         0 0 0 2px var(--bp-focus);

  /* ── BORDER RADIUS SCALE ─────────────────────── */
  --bp-radius-micro:    2px;    /* Inline code */
  --bp-radius-subtle:   4px;    /* Small containers */
  --bp-radius-std:      6px;    /* Buttons, links */
  --bp-radius-card:     8px;    /* Cards, list items */
  --bp-radius-image:    12px;   /* Featured / image cards */
  --bp-radius-tab:      64px;   /* Tab nav pills */
  --bp-radius-nav:      100px;  /* Large nav links */
  --bp-radius-pill:     9999px; /* Badges, tags, status */
  --bp-radius-circle:   50%;    /* Avatar, menu toggle */

  /* ── SPACING ─────────────────────────────────── */
  --bp-sp-1:    1px;
  --bp-sp-2:    2px;
  --bp-sp-3:    3px;
  --bp-sp-4:    4px;
  --bp-sp-5:    5px;
  --bp-sp-6:    6px;
  --bp-sp-8:    8px;
  --bp-sp-10:  10px;
  --bp-sp-12:  12px;
  --bp-sp-14:  14px;
  --bp-sp-16:  16px;
  --bp-sp-32:  32px;
  --bp-sp-36:  36px;
  --bp-sp-40:  40px;
  --bp-sp-48:  48px;
  --bp-sp-64:  64px;
  --bp-sp-80:  80px;
  --bp-sp-120: 120px;

  /* ── TYPOGRAPHY TOKENS ───────────────────────── */
  --bp-font-sans: 'Geist', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  --bp-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, 'Roboto Mono', Menlo, Monaco, 'Courier New', monospace;

  /* Semantic CSS vars — semantic roles */
  --bp-text-primary:   var(--bp-black);
  --bp-text-secondary: var(--bp-gray-600);
  --bp-text-muted:     var(--bp-gray-500);
  --bp-text-disabled:  var(--bp-gray-400);
  --bp-bg-page:        var(--bp-white);
  --bp-bg-surface:     var(--bp-white);
  --bp-bg-subtle:      var(--bp-gray-50);
  --bp-border-default: var(--bp-gray-100);
}

/* ── TYPOGRAPHY CLASSES ─────────────────────────── */

/* Ligatures globally on all Geist text */
* {
  font-feature-settings: "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

\.bp-display-hero {
  font-family: var(--bp-font-sans);
  font-size: 48px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -2.4px;
  color: var(--bp-black);
}

\.bp-display-large {
  font-family: var(--bp-font-sans);
  font-size: 72px;
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: -2.88px;
  color: var(--bp-black);
}

\.bp-section-heading {
  font-family: var(--bp-font-sans);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -2.4px;
  color: var(--bp-black);
}

\.bp-subheading-large {
  font-family: var(--bp-font-sans);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -1.28px;
  color: var(--bp-black);
}

\.bp-subheading {
  font-family: var(--bp-font-sans);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -1.28px;
  color: var(--bp-black);
}

\.bp-card-title {
  font-family: var(--bp-font-sans);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.33;
  letter-spacing: -0.96px;
  color: var(--bp-black);
}

\.bp-card-title-light {
  font-family: var(--bp-font-sans);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.33;
  letter-spacing: -0.96px;
  color: var(--bp-black);
}

\.bp-body-large {
  font-family: var(--bp-font-sans);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: normal;
  color: var(--bp-gray-600);
}

\.bp-body {
  font-family: var(--bp-font-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.56;
  letter-spacing: normal;
  color: var(--bp-gray-600);
}

\.bp-body-small {
  font-family: var(--bp-font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--bp-gray-600);
}

\.bp-body-medium {
  font-family: var(--bp-font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--bp-black);
}

\.bp-body-semibold {
  font-family: var(--bp-font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.32px;
  color: var(--bp-black);
}

\.bp-button-label {
  font-family: var(--bp-font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.43;
  letter-spacing: normal;
  color: var(--bp-black);
}

\.bp-caption {
  font-family: var(--bp-font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.33;
  letter-spacing: normal;
  color: var(--bp-gray-500);
}

\.bp-mono-body {
  font-family: var(--bp-font-mono);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--bp-black);
  font-feature-settings: "liga" 1, "tnum" 1;
}

\.bp-mono-caption {
  font-family: var(--bp-font-mono);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.54;
  letter-spacing: normal;
  color: var(--bp-gray-600);
  font-feature-settings: "liga" 1, "tnum" 1;
}

\.bp-mono-label {
  font-family: var(--bp-font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--bp-gray-500);
  font-feature-settings: "liga" 1, "tnum" 1;
}

\.bp-micro-badge {
  font-family: var(--bp-font-sans);
  font-size: 7px;
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--bp-black);
}