/* ============================================================
   Unifybase — Design Tokens · v1.0
   Editorial Calm direction.

   This file is the SOURCE OF TRUTH for all design values.
   Generated from /Design System.html. Do not duplicate these
   values in components — reference them by CSS custom property.

   Mirror file: /tokens.json  (same values, for non-web platforms)
   ============================================================ */

:root {
  /* ─────────────────────────────────────────────
     COLOR · Brand / Teal
     Use teal sparingly: single accents, primary CTA,
     eyebrows. Never as a full section background.
     ───────────────────────────────────────────── */
  --color-teal-50:   #F0FDFA;
  --color-teal-100:  #CCFBF1;   /* "tint" — soft-accent background */
  --color-teal-200:  #99F6E4;
  --color-teal-400:  #2DD4BF;
  --color-teal-500:  #14B8A6;
  --color-teal-600:  #0D9488;   /* alt primary accent */
  --color-teal-700:  #0F766E;   /* PRIMARY accent — the brand teal */
  --color-teal-800:  #115E59;   /* campaign / dark teal */
  --color-teal-900:  #134E4A;

  /* ─────────────────────────────────────────────
     COLOR · Ink (warm neutrals)
     Default text, structural lines, dark surfaces.
     ───────────────────────────────────────────── */
  --color-ink-950:   #0E0F12;
  --color-ink-900:   #1B1C20;   /* default text / dark bg */
  --color-ink-800:   #2A2C34;
  --color-ink-700:   #383A47;   /* body / secondary text */
  --color-ink-500:   #70727F;   /* muted / metadata */
  --color-ink-400:   #9A9CA8;
  --color-ink-300:   #CDCED8;
  --color-ink-200:   #E8E9ED;   /* grid */
  --color-ink-100:   #F2F2F5;
  --color-ink-50:    #F8F8FA;

  /* ─────────────────────────────────────────────
     COLOR · Paper (cream surfaces)
     Default page background. Never use pure white
     as the page bg — only inside cards on cream.
     ───────────────────────────────────────────── */
  --color-paper:     #FAFAF7;   /* primary surface */
  --color-paper-2:   #F4F3EE;   /* secondary surface */
  --color-line:      #E6E5DE;   /* default border on paper */

  /* ─────────────────────────────────────────────
     COLOR · Semantic
     ───────────────────────────────────────────── */
  --color-success:   #10B981;
  --color-warning:   #F59E0B;
  --color-danger:    #EF4444;
  --color-info:      #DF678C;   /* the "pink" — reserved info accent */

  /* ─────────────────────────────────────────────
     COLOR · Semantic aliases (use these in product)
     Change these to re-theme; everything else stays.
     ───────────────────────────────────────────── */
  --bg:              var(--color-paper);
  --bg-elevated:     #FFFFFF;
  --bg-secondary:    var(--color-paper-2);
  --bg-inverse:      var(--color-ink-900);

  --fg:              var(--color-ink-900);
  --fg-body:         var(--color-ink-700);
  --fg-muted:        var(--color-ink-500);
  --fg-inverse:      var(--color-paper);

  --accent:          var(--color-teal-700);
  --accent-hover:    var(--color-teal-800);
  --accent-soft:     var(--color-teal-100);

  --border:          var(--color-line);
  --border-strong:   var(--color-ink-200);


  /* ─────────────────────────────────────────────
     TYPE · Families
     Three families. Do not add a fourth.
     ───────────────────────────────────────────── */
  --font-serif:   "Newsreader", "Source Serif 4", Georgia, serif;
  --font-sans:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ─────────────────────────────────────────────
     TYPE · Scale
     (size / line-height / weight / tracking / family)
     ───────────────────────────────────────────── */
  --text-display-1-size:    80px;
  --text-display-1-lh:      78px;
  --text-display-1-weight:  400;
  --text-display-1-track:   -0.035em;
  --text-display-1-family:  var(--font-serif);

  --text-display-2-size:    56px;
  --text-display-2-lh:      57px;
  --text-display-2-weight:  400;
  --text-display-2-track:   -0.03em;
  --text-display-2-family:  var(--font-serif);

  --text-h1-size:           44px;
  --text-h1-lh:             46px;
  --text-h1-weight:         400;
  --text-h1-track:          -0.025em;
  --text-h1-family:         var(--font-serif);

  --text-h2-size:           32px;
  --text-h2-lh:             35px;
  --text-h2-weight:         400;
  --text-h2-track:          -0.02em;
  --text-h2-family:         var(--font-serif);

  --text-h3-size:           22px;
  --text-h3-lh:             26px;
  --text-h3-weight:         600;
  --text-h3-track:          -0.015em;
  --text-h3-family:         var(--font-sans);

  --text-body-lg-size:      17px;
  --text-body-lg-lh:        27px;
  --text-body-lg-weight:    400;
  --text-body-lg-track:     -0.005em;
  --text-body-lg-family:    var(--font-sans);

  --text-body-size:         14px;
  --text-body-lh:           22px;
  --text-body-weight:       400;
  --text-body-track:        -0.005em;
  --text-body-family:       var(--font-sans);

  --text-caption-size:      12px;
  --text-caption-lh:        17px;
  --text-caption-weight:    500;
  --text-caption-track:     0;
  --text-caption-family:    var(--font-sans);

  --text-mono-size:         11px;
  --text-mono-lh:           15px;
  --text-mono-weight:       500;
  --text-mono-track:        0.08em;
  --text-mono-family:       var(--font-mono);

  /* Brand wordmark — locked spec */
  --wordmark-family:        var(--font-sans);
  --wordmark-weight:        600;
  --wordmark-track:         -0.03em;

  /* ─────────────────────────────────────────────
     SPACING · 4px base
     ───────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* ─────────────────────────────────────────────
     RADIUS
     ───────────────────────────────────────────── */
  --radius-sm:    6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ─────────────────────────────────────────────
     ELEVATION (warm, soft, never colored)
     ───────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 1px rgba(15, 23, 42, .03);
  --shadow-2: 0 4px 12px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-3: 0 12px 32px rgba(15, 23, 42, .08), 0 2px 6px rgba(15, 23, 42, .04);

  /* ─────────────────────────────────────────────
     MOTION
     ───────────────────────────────────────────── */
  --duration-instant: 80ms;
  --duration-fast:    150ms;
  --duration-base:    220ms;
  --duration-slow:    360ms;

  --easing-standard:  cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --easing-emphasis:  cubic-bezier(0.2, 0.0, 0.0, 1.2);

  /* ─────────────────────────────────────────────
     LAYOUT
     ───────────────────────────────────────────── */
  --container-max:    1280px;
  --container-pad-x:  56px;
  --focus-ring:       2px solid var(--color-teal-400);
}

/* ============================================================
   Base reset + sensible defaults.
   Drop tokens.css into a project and these defaults apply.
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a       { color: inherit; text-decoration: none; }
img, svg { display: block; }
code, pre { font-family: var(--font-mono); }

:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* ============================================================
   Typography utility classes
   ============================================================ */

.t-display-1 { font: var(--text-display-1-weight) var(--text-display-1-size)/var(--text-display-1-lh) var(--text-display-1-family); letter-spacing: var(--text-display-1-track); }
.t-display-2 { font: var(--text-display-2-weight) var(--text-display-2-size)/var(--text-display-2-lh) var(--text-display-2-family); letter-spacing: var(--text-display-2-track); }
.t-h1        { font: var(--text-h1-weight)        var(--text-h1-size)/var(--text-h1-lh)               var(--text-h1-family);        letter-spacing: var(--text-h1-track); }
.t-h2        { font: var(--text-h2-weight)        var(--text-h2-size)/var(--text-h2-lh)               var(--text-h2-family);        letter-spacing: var(--text-h2-track); }
.t-h3        { font: var(--text-h3-weight)        var(--text-h3-size)/var(--text-h3-lh)               var(--text-h3-family);        letter-spacing: var(--text-h3-track); }
.t-body-lg   { font: var(--text-body-lg-weight)   var(--text-body-lg-size)/var(--text-body-lg-lh)     var(--text-body-lg-family);   letter-spacing: var(--text-body-lg-track); }
.t-body      { font: var(--text-body-weight)      var(--text-body-size)/var(--text-body-lh)           var(--text-body-family);      letter-spacing: var(--text-body-track); }
.t-caption   { font: var(--text-caption-weight)   var(--text-caption-size)/var(--text-caption-lh)     var(--text-caption-family);   letter-spacing: var(--text-caption-track); }
.t-mono      { font: var(--text-mono-weight)      var(--text-mono-size)/var(--text-mono-lh)           var(--text-mono-family);      letter-spacing: var(--text-mono-track); text-transform: uppercase; color: var(--fg-muted); }

/* ============================================================
   Component classes — the canonical implementations.
   Match the patterns shown in /Design System.html § 06.
   ============================================================ */

/* ─────────── Button ─────────── */
.ub-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 10px 18px;
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--duration-fast) var(--easing-standard),
              border-color var(--duration-fast) var(--easing-standard),
              color var(--duration-fast) var(--easing-standard);
}
.ub-btn--sm { padding: 8px 14px; font-size: 13px; }
.ub-btn--lg { padding: 14px 22px; font-size: 15px; }

.ub-btn--primary { background: var(--color-ink-900); color: var(--color-paper); }
.ub-btn--primary:hover { background: var(--color-ink-800); }

.ub-btn--teal    { background: var(--accent); color: #fff; }
.ub-btn--teal:hover { background: var(--accent-hover); }

.ub-btn--ghost   { background: transparent; color: var(--fg); border-color: var(--border); }
.ub-btn--ghost:hover { background: var(--bg-secondary); }

.ub-btn--cream   { background: var(--bg-secondary); color: var(--fg); }
.ub-btn--text    { background: transparent; color: var(--fg); padding: 10px 0; border-radius: 0; }

/* ─────────── Input ─────────── */
.ub-input {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: 14px;
  color: var(--fg);
  transition: border-color var(--duration-fast) var(--easing-standard);
}
.ub-input:focus-within { border-color: var(--accent); outline: none; }
.ub-input__icon { color: var(--fg-muted); display: inline-flex; }
.ub-input input { flex: 1; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; }
.ub-input input::placeholder { color: var(--fg-muted); }

/* ─────────── Badge ─────────── */
.ub-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-secondary); color: var(--fg-body);
  border: 1px solid var(--border-strong);
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: -0.005em;
}
.ub-badge--teal    { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.ub-badge--success { background: #D1FAE5; color: #065F46; border-color: transparent; }
.ub-badge--warning { background: #FEF3C7; color: #92400E; border-color: transparent; }
.ub-badge--danger  { background: #FEE2E2; color: #991B1B; border-color: transparent; }
.ub-badge--dark    { background: var(--bg-inverse); color: var(--fg-inverse); border-color: transparent; }

/* ─────────── Card ─────────── */
.ub-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
}
.ub-card--ghost {
  background: var(--bg-secondary);
  border: 1px solid var(--border-strong);
}

/* ─────────── Source chip (Notion/Slack/etc.) ─────────── */
.ub-source {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 4px 9px 4px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: #fff;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-body);
}

/* ─────────── Eyebrow (the mono labels used everywhere) ─────────── */
.ub-eyebrow {
  font: 500 10.5px/1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.ub-eyebrow--accent { color: var(--accent); font-weight: 600; }