/* =========================================================================
   Bopinc — Colors & Type
   The foundational tokens for every Bopinc artifact. Import this file and
   use the CSS vars below rather than hard-coding values.
   ========================================================================= */

/* ---------- Fonts --------------------------------------------------------- */

@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Thin.ttf") format("truetype");         font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-ThinItalic.ttf") format("truetype");   font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-ExtraLight.ttf") format("truetype");       font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-ExtraLightItalic.ttf") format("truetype"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Light.ttf") format("truetype");        font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-LightItalic.ttf") format("truetype");  font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Regular.ttf") format("truetype");      font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Medium.ttf") format("truetype");       font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-MediumItalic.ttf") format("truetype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-SemiBold.ttf") format("truetype");        font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-SemiBoldItalic.ttf") format("truetype");  font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Bold.ttf") format("truetype");         font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-BoldItalic.ttf") format("truetype");   font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-ExtraBold.ttf") format("truetype");       font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-ExtraBoldItalic.ttf") format("truetype"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Black.ttf") format("truetype");        font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-BlackItalic.ttf") format("truetype");  font-weight: 900; font-style: italic; font-display: swap; }

@font-face { font-family: "Vollkorn"; src: url("fonts/Vollkorn-Regular.ttf") format("truetype");        font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Vollkorn"; src: url("fonts/Vollkorn-Italic.ttf") format("truetype");         font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Vollkorn"; src: url("fonts/Vollkorn-SemiBold.ttf") format("truetype");       font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Vollkorn"; src: url("fonts/Vollkorn-SemiBoldItalic.ttf") format("truetype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Vollkorn"; src: url("fonts/Vollkorn-Bold.ttf") format("truetype");           font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Vollkorn"; src: url("fonts/Vollkorn-BoldItalic.ttf") format("truetype");     font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Vollkorn"; src: url("fonts/Vollkorn-Black.ttf") format("truetype");          font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Vollkorn"; src: url("fonts/Vollkorn-BlackItalic.ttf") format("truetype");    font-weight: 900; font-style: italic; font-display: swap; }

/* ---------- Tokens -------------------------------------------------------- */

:root {
  /* Brand palette — base */
  --bop-yellow:  #F4DB27; /* primary brand yellow */
  --bop-red:     #EB6558; /* accent — warm / alert / human */
  --bop-green:   #8BC8A5; /* accent — growth / nature */
  --bop-blue:    #4696B5; /* accent — calm / knowledge */
  --bop-white:   #FFFFFF;
  --bop-black:   #000000;

  /* Brand tints — official 25 / 50 / 75 / 100 ladder.
     Each ladder is a mix-with-white of the 100% brand hue. */
  --bop-yellow-25: #FCF5C9;
  --bop-yellow-50: #F9ED93;
  --bop-yellow-75: #F6E45D;
  --bop-yellow-100: #F4DB27;

  --bop-red-25:    #FADFDD;
  --bop-red-50:    #F5B2AB;
  --bop-red-75:    #F08B82;
  --bop-red-100:   #EB6558;

  --bop-green-25:  #E2F2E9;
  --bop-green-50:  #C5E3D2;
  --bop-green-75:  #A8D5BB;
  --bop-green-100: #8BC8A5;

  --bop-blue-25:   #DAEAF0;
  --bop-blue-50:   #B5D5E1;
  --bop-blue-75:   #8FBFD3;
  --bop-blue-100:  #4696B5;

  --bop-white-25:  #F2F2F2;
  --bop-white-50:  #D9D9D9;
  --bop-white-75:  #BFBFBF;

  --bop-black-25:  #BFBFBF;
  --bop-black-50:  #808080;
  --bop-black-75:  #404040;

  /* Neutrals (warm paper greys, derived — NOT cold blacks) */
  --bop-ink:       #0B0B0B;  /* richer than pure black for long-form text */
  --bop-ink-80:    #2E2E2E;
  --bop-ink-60:    #5C5C5C;
  --bop-ink-40:    #8A8A8A;
  --bop-ink-20:    #D4D4D2;
  --bop-paper:     #FAF7EF;  /* warm off-white canvas */
  --bop-paper-2:   #F3EFE3;  /* slightly warmer panel */

  /* ---- Semantic ---- */
  --color-bg:          var(--bop-white);
  --color-bg-alt:      var(--bop-paper);
  --color-bg-inverse:  var(--bop-black);

  --color-fg:          var(--bop-ink);        /* primary text */
  --color-fg-muted:    var(--bop-ink-60);     /* secondary text */
  --color-fg-subtle:   var(--bop-ink-40);     /* tertiary / captions */
  --color-fg-inverse:  var(--bop-white);

  --color-accent:      var(--bop-yellow);
  --color-accent-ink:  var(--bop-black);      /* text on yellow */

  --color-success:     var(--bop-green);
  --color-info:        var(--bop-blue);
  --color-danger:      var(--bop-red);
  --color-warning:     var(--bop-yellow);

  --color-border:      var(--bop-ink-20);
  --color-border-strong: var(--bop-black);

  /* ---- Type families ---- */
  --font-display: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-sans:    "Montserrat", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-serif:   "Vollkorn", Georgia, "Times New Roman", serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Type scale (fluid, designed for 16px root) ---- */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;

  /* Role-based type */
  --type-display:  900 var(--fs-96)/0.92 var(--font-display);
  --type-h1:       900 var(--fs-72)/0.95 var(--font-display);
  --type-h2:       800 var(--fs-56)/1.00 var(--font-display);
  --type-h3:       700 var(--fs-40)/1.05 var(--font-display);
  --type-h4:       700 var(--fs-24)/1.20 var(--font-display);
  --type-eyebrow:  800 var(--fs-14)/1.00 var(--font-sans);  /* UPPERCASE + tracked */
  --type-body-lg:  400 var(--fs-20)/1.55 var(--font-sans);
  --type-body:     400 var(--fs-16)/1.55 var(--font-sans);
  --type-body-sm:  400 var(--fs-14)/1.50 var(--font-sans);
  --type-quote:    400 var(--fs-32)/1.30 var(--font-serif);
  --type-pull:     400 italic var(--fs-24)/1.40 var(--font-serif);
  --type-caption:  500 var(--fs-12)/1.40 var(--font-sans);
  --type-button:   700 var(--fs-16)/1.00 var(--font-sans);

  /* ---- Spacing scale ---- */
  --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;

  /* ---- Radii ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;   /* default card */
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---- Shadows (low, warm — never cold glow) ---- */
  --shadow-1: 0 1px 2px rgba(11,11,11,0.06), 0 1px 1px rgba(11,11,11,0.04);
  --shadow-2: 0 4px 12px rgba(11,11,11,0.08), 0 2px 4px rgba(11,11,11,0.04);
  --shadow-3: 0 12px 28px rgba(11,11,11,0.12), 0 4px 8px rgba(11,11,11,0.06);
  --shadow-pop: 6px 6px 0 var(--bop-black); /* signature hard offset (for pills/cards) */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);     /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast: 140ms;  /* @kind other */
  --dur-base: 220ms;  /* @kind other */
  --dur-slow: 420ms;  /* @kind other */

  /* ---- Layout ---- */
  --container-narrow: 720px;
  --container: 1080px;
  --container-wide: 1360px;
}

/* ---------- Base element styles ------------------------------------------- */

html { color-scheme: light; }

body {
  font: var(--type-body);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font: var(--type-h1); margin: 0 0 var(--space-5); letter-spacing: -0.02em; }
h2 { font: var(--type-h2); margin: 0 0 var(--space-5); letter-spacing: -0.015em; }
h3 { font: var(--type-h3); margin: 0 0 var(--space-4); letter-spacing: -0.01em; }
h4 { font: var(--type-h4); margin: 0 0 var(--space-3); }

p  { margin: 0 0 var(--space-4); max-width: 62ch; }

small, .caption { font: var(--type-caption); color: var(--color-fg-muted); }

.eyebrow {
  font: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-fg);
}

.display { font: var(--type-display); letter-spacing: -0.025em; }

blockquote, .quote {
  font: var(--type-quote);
  font-style: italic;
  color: var(--color-fg);
  margin: var(--space-5) 0;
  padding-left: var(--space-5);
  border-left: 4px solid var(--bop-yellow);
}

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--bop-yellow); }
a:hover { text-decoration-color: var(--bop-black); }

hr { border: 0; border-top: 2px solid var(--color-border); margin: var(--space-7) 0; }

::selection { background: var(--bop-yellow); color: var(--bop-black); }