/* ==========================================================================
   Brother Bear — Colors & Type
   "Protected. Represented. In control."
   Premium, restrained, analog. Ink on paper with one olive accent.
   ========================================================================== */

/* ---------- Fonts ----------
   Primary commercial: Söhne (Klim Type Foundry) — bundled at fonts/Sohne.otf
   Secondary commercial: Canela Regular (Commercial Type) — bundled at fonts/Canela-Regular.otf
   Mono: JetBrains Mono via Google Fonts (deliberate open substitute; brand
         guide does not specify a mono family).
*/
@font-face {
  font-family: "Söhne";
  src: url("fonts/Sohne.otf") format("opentype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Canela";
  src: url("fonts/Canela-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ------------------------------------------------------------------
     COLORS — Ink on paper with one olive accent
     Ratio target: Beige 58 / Black 24 / Olive 12 / Brown 6
     ------------------------------------------------------------------ */

  /* Core palette */
  --ink-black:     #0A0A0A;   /* Primary text, logos, linework */
  --paper-beige:   #E8DCC8;   /* Default background */
  --muted-olive:   #686F51;   /* Accent panels and premium moments */
  --dusty-brown:   #8A7A65;   /* Secondary detail, dividers */

  /* Tonal extensions (derived, restrained) */
  --paper-cream:   #F1E8D7;   /* Lighter paper for layering */
  --paper-deep:    #D8C9B0;   /* Deeper paper for cards on cards */
  --ink-soft:      #2A2620;   /* Softer ink for body */
  --ink-faint:     #4A453C;   /* Captions, secondary text */
  --olive-deep:    #4A5239;
  --olive-soft:    #8A906E;
  --brown-soft:    #B0A28A;

  /* Semantic — surface */
  --bg:            var(--paper-beige);
  --bg-elevated:   var(--paper-cream);
  --bg-sunken:     var(--paper-deep);
  --bg-inverse:    var(--ink-black);
  --bg-accent:     var(--muted-olive);

  /* Semantic — text */
  --fg:            var(--ink-black);
  --fg-1:          var(--ink-black);   /* Headlines, primary */
  --fg-2:          var(--ink-soft);    /* Body */
  --fg-3:          var(--ink-faint);   /* Captions */
  --fg-muted:      var(--dusty-brown); /* Secondary detail */
  --fg-on-dark:    var(--paper-beige);
  --fg-on-olive:   var(--paper-cream);

  /* Semantic — line */
  --line:          var(--ink-black);
  --line-soft:     rgba(10, 10, 10, 0.18);
  --line-faint:    rgba(10, 10, 10, 0.10);
  --divider:       var(--dusty-brown);

  /* Status — used sparingly. Brand stays calm. */
  --status-good:   #4A5239;   /* olive-deep — approve */
  --status-warn:   #8A6A2C;   /* warm ink — adjust */
  --status-stop:   #6B2A1E;   /* deep oxide — decline */

  /* ------------------------------------------------------------------
     TYPE — Modern authority with editorial taste
     ------------------------------------------------------------------ */

  /* Stacks */
  --font-sans:    "Söhne", "Inter Tight", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif:   "Canela", "Fraunces", "Times New Roman", Georgia, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Weights — Söhne lives at Bold; Inter Tight Bold (700) reads similar */
  --w-regular:    400;
  --w-medium:     500;
  --w-semibold:   600;
  --w-bold:       700;
  --w-black:      800;

  /* Sizes */
  --t-display:    72px;
  --t-h1:         48px;
  --t-h2:         34px;
  --t-h3:         24px;
  --t-h4:         18px;
  --t-body:       16px;
  --t-small:      14px;
  --t-caption:    12px;
  --t-eyebrow:    11px;

  /* Line height */
  --lh-tight:     1.05;
  --lh-snug:      1.2;
  --lh-normal:    1.45;
  --lh-relaxed:   1.6;

  /* Tracking — mostly tight. Eyebrows wide for postal label feel. */
  --tr-tight:     -0.02em;
  --tr-normal:    0em;
  --tr-eyebrow:   0.18em;
  --tr-stamp:     0.24em;

  /* ------------------------------------------------------------------
     SPACING / RADII / SHADOW — restrained
     ------------------------------------------------------------------ */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;

  --r-none:   0;
  --r-sm:     2px;     /* default — barely there, document-like */
  --r-md:     4px;
  --r-lg:     8px;
  --r-pill:   999px;

  /* Shadows — letterpress, never glossy */
  --shadow-press:  inset 0 -1px 0 rgba(10,10,10,0.12);
  --shadow-card:   0 1px 0 rgba(10,10,10,0.08), 0 12px 24px -16px rgba(10,10,10,0.18);
  --shadow-stamp:  0 0 0 1px var(--ink-black);

  /* Borders */
  --border:        1px solid var(--ink-black);
  --border-soft:   1px solid var(--line-soft);
  --border-dashed: 1px dashed var(--ink-black);
}

/* ==========================================================================
   Semantic type styles — apply directly via class
   ========================================================================== */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.bb-display, h1.bb-display {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

/* Editorial tagline — serif, low contrast, set generously */
.bb-tagline {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-h1);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  color: var(--fg-1);
  font-style: normal;
}

.bb-h1, h1 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

.bb-h2, h2 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

.bb-h3, h3 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

.bb-h4, h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.bb-body, p {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.bb-small {
  font-size: var(--t-small);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.bb-caption {
  font-size: var(--t-caption);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

/* Eyebrow — postal-label feel. Used above section headers. */
.bb-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-1);
}

/* Stamp text — even wider tracking, all caps */
.bb-stamp {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--t-caption);
  letter-spacing: var(--tr-stamp);
  text-transform: uppercase;
  color: var(--fg-1);
}

/* Editorial serif quote */
.bb-quote {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  color: var(--fg-1);
}

/* Mono — for deal numbers, codes, document fields */
.bb-mono {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  letter-spacing: 0;
}

/* Document-style key/value pair (deal summary look) */
.bb-field-label {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--t-caption);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ==========================================================================
   Texture utilities — paper grain, ink grain, postal waves
   Use sparingly; brand guide rule: "barely visible, not dirty"
   ========================================================================== */

.bb-paper {
  background-color: var(--paper-beige);
  background-image:
    radial-gradient(rgba(138,122,101,0.08) 1px, transparent 1px),
    radial-gradient(rgba(10,10,10,0.04) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
}

.bb-waves {
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 8px,
    rgba(10,10,10,0.08) 8px,
    rgba(10,10,10,0.08) 9px
  );
}

/* Postage-stamp scalloped border via radial-gradient mask */
.bb-stamp-frame {
  --scallop: 8px;
  background: var(--bg);
  -webkit-mask:
    radial-gradient(circle at center, #000 calc(var(--scallop) - 1px), transparent var(--scallop))
    0 0/calc(var(--scallop) * 2) calc(var(--scallop) * 2);
  mask:
    radial-gradient(circle at center, #000 calc(var(--scallop) - 1px), transparent var(--scallop))
    0 0/calc(var(--scallop) * 2) calc(var(--scallop) * 2);
}