/* ============================================================================
   TABADAL — Colors & Type Foundations
   Dubai SME barter platform. Trade services, not cash.
   ----------------------------------------------------------------------------
   Direction: warm + credible. Deep "Tabadal teal" carries trust & exchange,
   a terracotta/clay accent signals value, all on a warm cream paper.
   Fonts load from Google Fonts CDN — see note at bottom. If you want
   self-hosted .woff2 files dropped into /fonts, ask and I'll swap them in.
   ============================================================================ */

/* Display: Bricolage Grotesque — characterful, slightly humanist grotesque.
   Body/UI: Hanken Grotesk — clean, friendly, highly readable.
   Mono:    Space Mono — for trade-credit figures, ledgers, codes.
   Arabic:  Tajawal — modern geometric Arabic for bilingual support. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Hanken+Grotesk:ital,wght@0,400..800;1,400..600&family=Space+Mono:wght@400;700&family=Tajawal:wght@400;500;700&display=swap');

:root {
  /* ---------------------------------------------------------------- COLORS */

  /* Brand — Tabadal Teal (trust, growth, mutual exchange) */
  --teal-950: #052420;
  --teal-900: #06302A;
  --teal-800: #0B463D;
  --teal-700: #0E5A4F;   /* PRIMARY brand */
  --teal-600: #137567;
  --teal-500: #18897A;
  --teal-400: #3BA493;
  --teal-300: #79C4B6;
  --teal-200: #B4E0D6;
  --teal-100: #D8EFE9;
  --teal-50:  #EEF8F5;

  /* Accent — Clay (desert terracotta, warmth + value) */
  --clay-700: #9C3A22;
  --clay-600: #B6492C;
  --clay-500: #D15B38;   /* ACCENT */
  --clay-400: #E07C5A;
  --clay-300: #ECA086;
  --clay-200: #F4C6B4;
  --clay-100: #FAE6DC;
  --clay-50:  #FCF4EF;

  /* Extended brand spectrum — muted earthy jewels for category coding,
     illustration & charts. NOT for primary actions (teal) or the value
     accent (clay). Each: 700 deep / 500 solid / 100 tint / 50 wash. */
  --indigo-700: #2C4063;
  --indigo-500: #3F5B82;
  --indigo-100: #E4E9F1;
  --indigo-50:  #F1F4F9;

  --plum-700: #6E3A50;
  --plum-500: #8C4E68;
  --plum-100: #F1E5EC;
  --plum-50:  #F8F1F5;

  --olive-700: #565F30;
  --olive-500: #717D41;
  --olive-100: #EBEEDD;
  --olive-50:  #F4F6EC;

  /* Neutrals — warm, slightly green-tinted ink on sand/cream */
  --ink-900: #14201D;    /* primary text */
  --ink-800: #243029;
  --ink-700: #3A453F;    /* secondary text */
  --ink-600: #515C55;
  --ink-500: #6B756E;    /* tertiary / captions */
  --ink-400: #8C958E;    /* placeholder */
  --ink-300: #B6BDB7;    /* disabled */
  --sand-300: #DAD4C6;   /* strong border */
  --sand-200: #E7E1D4;   /* border / divider */
  --sand-100: #F1ECE0;   /* subtle fill */
  --paper:    #FAF7EF;   /* page background (warm cream) */
  --surface:  #FFFFFF;   /* cards / raised surfaces */
  --white:    #FFFFFF;

  /* Semantic */
  --success: #1F8A5B;
  --success-bg: #E4F3EB;
  --warning: #D98A1E;
  --warning-bg: #FBEFD6;
  --danger:  #C24233;
  --danger-bg: #F8E6E2;
  --info:    #1C7A8C;
  --info-bg: #E2F1F3;

  /* Role tokens (use these in product UI) */
  --bg:            var(--paper);
  --bg-raised:     var(--surface);
  --bg-sunken:     var(--sand-100);
  --bg-inverse:    var(--teal-900);

  --fg1:           var(--ink-900);  /* primary text */
  --fg2:           var(--ink-700);  /* secondary text */
  --fg3:           var(--ink-500);  /* tertiary text / captions */
  --fg-on-teal:    #EAF6F2;         /* text on deep teal */
  --fg-on-accent:  #FFF6F2;         /* text on gold */

  --brand:         var(--teal-700);
  --brand-hover:   var(--teal-800);
  --brand-active:  var(--teal-900);
  --brand-subtle:  var(--teal-50);
  --accent:        var(--clay-500);
  --accent-hover:  var(--clay-600);
  --accent-subtle: var(--clay-50);

  --border:        var(--sand-200);
  --border-strong: var(--sand-300);
  --focus-ring:    color-mix(in oklab, var(--teal-500) 45%, transparent);

  /* --------------------------------------------------------------- TYPE */
  --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --font-sans:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;
  --font-arabic:  'Tajawal', 'Hanken Grotesk', sans-serif;

  /* Type scale (px references; rem assumes 16px root) */
  --text-display: 4rem;     /* 64 */
  --text-h1:      3rem;      /* 48 */
  --text-h2:      2.25rem;   /* 36 */
  --text-h3:      1.75rem;   /* 28 */
  --text-h4:      1.375rem;  /* 22 */
  --text-lg:      1.125rem;  /* 18 */
  --text-base:    1rem;      /* 16 */
  --text-sm:      0.875rem;  /* 14 */
  --text-xs:      0.8125rem; /* 13 */
  --text-2xs:     0.75rem;   /* 12 */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  --leading-tight:   1.08;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* ------------------------------------------------------ SPACING / SHAPE */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;   /* buttons, inputs */
  --radius-lg: 14px;
  --radius-xl: 18px;   /* cards */
  --radius-2xl: 24px;  /* large panels */
  --radius-pill: 999px;

  /* Warm, low-spread shadows (greenish-warm, never pure black) */
  --shadow-xs: 0 1px 2px rgba(20, 32, 29, 0.06);
  --shadow-sm: 0 1px 3px rgba(20, 32, 29, 0.08), 0 1px 2px rgba(20, 32, 29, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 32, 29, 0.08), 0 2px 4px rgba(20, 32, 29, 0.05);
  --shadow-lg: 0 12px 28px rgba(20, 32, 29, 0.12), 0 4px 8px rgba(20, 32, 29, 0.06);
  --shadow-xl: 0 24px 48px rgba(20, 32, 29, 0.16);
  --shadow-accent: 0 6px 18px rgba(209, 91, 56, 0.28);

  --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ============================================================================
   SEMANTIC TYPE CLASSES — apply directly or copy into component CSS.
   ============================================================================ */
.t-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.t-h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.t-h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.t-h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg1);
}
.t-h4 {
  font-family: var(--font-sans);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg1);
}
.t-lead {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg2);
}
.t-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg2);
}
.t-sm {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg2);
}
.t-caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--fg3);
}
.t-overline {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg3);
}
.t-credit {
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.t-arabic {
  font-family: var(--font-arabic);
  direction: rtl;
}

/* Convenience text-color utilities */
.fg1 { color: var(--fg1); }
.fg2 { color: var(--fg2); }
.fg3 { color: var(--fg3); }
.fg-brand { color: var(--brand); }
.fg-accent { color: var(--accent-hover); }

/* ----------------------------------------------------------------------------
   FONT NOTE / SUBSTITUTION FLAG
   These are Google Fonts (Bricolage Grotesque, Hanken Grotesk, Space Mono,
   Tajawal) loaded via the @import above. There are no self-hosted files in
   /fonts yet. If you have licensed/branded fonts, send them and I'll vendor
   them locally and update these tokens.
   ---------------------------------------------------------------------------- */