/* ==========================================================================
   Kinlend — Design Tokens
   "Warm Clay" color world. Single source of truth for the platform UI.
   Import this file first; build everything on var(--...).
   Brand is LOCKED — do not invent new colors, names, or values.
   v1 · 2026-06-18
   ========================================================================== */

:root {

  /* ----------------------------------------------------------------------
     COLOR — raw clay ramp (darkest → lightest)
     ---------------------------------------------------------------------- */
  --clay-espresso:   #3A1E12; /* primary text / darkest */
  --clay-deep:       #8A3A22; /* hover / pressed / deep accents */
  --clay:            #B14A2B; /* PRIMARY brand color */
  --clay-terracotta: #E8825C; /* secondary accent / highlights */
  --clay-peach:      #F4D2C2; /* light tint / progress tracks / avatars */
  --clay-sand:       #F7EEE4; /* surfaces / secondary background */
  --clay-cream:      #FBF6F0; /* page background */
  --clay-muted:      #856351; /* secondary text — AA on cream 5.0:1 & white 5.4:1 (was #9C7A68, AA-fail) */
  --clay-line:       #EAD9CC; /* borders / dividers */
  --clay-white:      #FFFFFF; /* cards */

  /* ----------------------------------------------------------------------
     COLOR — semantic aliases (use these in components)
     ---------------------------------------------------------------------- */
  --color-bg:           var(--clay-cream);      /* page background */
  --color-surface:      var(--clay-sand);       /* secondary surfaces */
  --color-card:         var(--clay-white);      /* cards */
  --color-text:         var(--clay-espresso);   /* primary text */
  --color-text-muted:   var(--clay-muted);      /* secondary text */
  --color-primary:      var(--clay);            /* primary brand / actions */
  --color-primary-deep: var(--clay-deep);       /* hover / pressed */
  --color-accent:       var(--clay-terracotta); /* highlights */
  --color-peach:        var(--clay-peach);       /* tints / tracks / avatars */
  --color-border:       var(--clay-line);       /* borders / dividers */

  /* ----------------------------------------------------------------------
     COLOR — semantic states (warm, accessible)
     ---------------------------------------------------------------------- */
  --color-success: #3B6D11; /* on track / paid */
  --color-warning: #BA7517; /* due soon */
  --color-danger:  #A32D2D; /* overdue / errors */
  --color-info:    var(--clay); /* info reuses Clay */

  /* Pale state tints — status badge backgrounds (badge text uses the solid state color above) */
  --color-success-tint: #E9F0DF; /* on track badge background */
  --color-warning-tint: #FAEFD8; /* due soon badge background */
  --color-danger-tint:  #F6DEDE; /* overdue badge background */

  /* ----------------------------------------------------------------------
     TYPOGRAPHY — font families
     Display: Söhne or Geist (premium); Inter is the free stand-in used now.
     Body: Inter.
     ---------------------------------------------------------------------- */
  --font-display: 'Söhne', 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;

  /* ----------------------------------------------------------------------
     TYPOGRAPHY — type scale (paired: size / line / weight / spacing)
     ---------------------------------------------------------------------- */

  /* Display H1 — 48 / 600 / 1.1 / -1.5px */
  --text-h1-size:    48px;
  --text-h1-line:    1.1;
  --text-h1-weight:  600;
  --text-h1-spacing: -1.5px;

  /* H2 — 32 / 600 / 1.2 / -0.5px */
  --text-h2-size:    32px;
  --text-h2-line:    1.2;
  --text-h2-weight:  600;
  --text-h2-spacing: -0.5px;

  /* H3 — 24 / 500 / 1.3 / -0.3px */
  --text-h3-size:    24px;
  --text-h3-line:    1.3;
  --text-h3-weight:  500;
  --text-h3-spacing: -0.3px;

  /* H4 — 18 / 500 / 1.4 / normal */
  --text-h4-size:    18px;
  --text-h4-line:    1.4;
  --text-h4-weight:  500;
  --text-h4-spacing: normal;

  /* Lead — 20 / 400 / 1.6 / normal */
  --text-lead-size:    20px;
  --text-lead-line:    1.6;
  --text-lead-weight:  400;
  --text-lead-spacing: normal;

  /* Body — 16 / 400 / 1.6 / normal */
  --text-body-size:    16px;
  --text-body-line:    1.6;
  --text-body-weight:  400;
  --text-body-spacing: normal;

  /* Small — 14 / 400 / 1.5 / normal */
  --text-small-size:    14px;
  --text-small-line:    1.5;
  --text-small-weight:  400;
  --text-small-spacing: normal;

  /* Overline / section label — 13 / 500 / 1.4 / +0.4px (Clay, sentence case) */
  --text-overline-size:    13px;
  --text-overline-line:    1.4;
  --text-overline-weight:  500;
  --text-overline-spacing: 0.4px;

  /* Mono (hex / code) — 13 */
  --text-mono-size:   13px;
  --text-mono-line:   1.5;
  --text-mono-weight: 400;

  /* ----------------------------------------------------------------------
     SPACING — 4px base
     ---------------------------------------------------------------------- */
  --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;

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

  /* ----------------------------------------------------------------------
     BORDERS & ELEVATION
     1px solid Line. At most ONE soft shadow.
     ---------------------------------------------------------------------- */
  --border-default: 1px solid var(--clay-line);
  --shadow-soft:    0 1px 2px rgba(58, 30, 18, 0.06);
}