/* =================================================================
   tokens.css — BizHive design tokens
   Source: Bi-Okoto Brand & Web Style Guide (BWeb batch 5b file 65)
   These are the SAME tokens used on bi-okoto.com — keep in sync.
================================================================= */

:root {
  /* === Brand colors === */
  --bo-red:           #C8302A;   /* Bi-Okoto Red — primary accent, headlines */
  --bo-red-soft:      rgba(200, 48, 42, 0.12);
  --bo-red-strong:    rgba(200, 48, 42, 0.40);
  --bo-cream:         #F8E9A8;   /* Cream parchment — hero panels, callouts */
  --bo-cream-warm:    #FAF4D9;   /* Warm cream — page background */
  --bo-cream-soft:    rgba(248, 233, 168, 0.08);
  --bo-green:         #3E7C2A;   /* Forest green — affirmations, success */
  --bo-green-soft:    rgba(62, 124, 42, 0.12);
  --bo-black:         #1F1A14;   /* Earth black — text on cream, dark surfaces */
  --bo-brown:         #5C4A20;   /* Muted brown — secondary text */
  --bo-border:        #E8DCA0;   /* Hairline border on cream */
  --bo-blue-deep:     #1A2D4F;   /* Reserved — deep blue for special callouts */
  --bo-white:         #FFFFFF;

  /* === Functional tokens === */
  --color-bg-page:        var(--bo-cream-warm);
  --color-bg-card:        var(--bo-white);
  --color-bg-sidebar:     var(--bo-black);
  --color-bg-elevated:    var(--bo-cream);
  --color-text-primary:   var(--bo-black);
  --color-text-secondary: var(--bo-brown);
  --color-text-on-dark:   var(--bo-cream);
  --color-text-accent:    var(--bo-red);
  --color-border:         var(--bo-border);
  --color-border-strong:  rgba(31, 26, 20, 0.18);

  /* === Status colors === */
  --status-new:        var(--bo-blue-deep);
  --status-progress:   #8B5A14;       /* amber */
  --status-success:    var(--bo-green);
  --status-warn:       #B07A14;
  --status-danger:     var(--bo-red);
  --status-muted:      var(--bo-brown);

  /* === Typography === */
  --font-display:  Georgia, 'Times New Roman', serif;
  --font-body:     'Inter', -apple-system, system-ui, sans-serif;
  --font-mono:     'SF Mono', Monaco, 'Courier New', monospace;

  /* === Sizing & spacing === */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-5: 24px;
  --gap-6: 32px;
  --gap-7: 48px;

  /* === Layout === */
  --sidebar-w: 248px;
  --topbar-h:  64px;

  /* === Shadows === */
  --shadow-card: 0 1px 0 rgba(31, 26, 20, 0.04);
  --shadow-pop:  0 4px 16px rgba(31, 26, 20, 0.08);
}

/* Reset / base */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--bo-red); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

[hidden] { display: none !important; }