/* =========================================================================
   ShaqoSmart — Colors & Type Foundations
   Warm, grounded, optimistic, professional. Mobile-first. EDITORIAL direction.
   Display: Fraunces (warm, quirky, grounded serif) — Google Fonts CDN.
   Body: Plus Jakarta Sans (self-hosted). Alternates wired: Noto Sans, IBM Plex.
   @font-face URLs resolve relative to THIS file (project root).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,500;1,9..144,600&display=swap');

/* ----- Playfair Display (kept as alternate display) ----- */
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 900; font-style: italic; font-display: swap;
}

/* ----- Plus Jakarta Sans (body — default) ----- */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800; font-style: italic; font-display: swap;
}

/* ----- Noto Sans (body alternate — strong multilingual coverage) ----- */
@font-face {
  font-family: 'Noto Sans';
  src: url('fonts/NotoSans-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 100 900; font-stretch: 62.5% 100%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Noto Sans';
  src: url('fonts/NotoSans-Italic-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 100 900; font-stretch: 62.5% 100%; font-style: italic; font-display: swap;
}

/* ----- IBM Plex Sans (body alternate) ----- */
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 100 700; font-stretch: 85% 100%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-Italic-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 100 700; font-stretch: 85% 100%; font-style: italic; font-display: swap;
}

/* ----- Inter (wired for completeness; NOT a brand default) ----- */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900; font-style: italic; font-display: swap;
}

:root {
  /* ---------- BRAND PALETTE (raw) ---------- */
  --sand:        #F6EEE0; /* app background — warm desert paper */
  --paper:       #FDFAF3; /* surfaces / cards — lighter warm paper */
  --ink:         #16110B; /* primary text — near-black, warm brown-black */
  --green:       #0F5C3F; /* primary brand + action — acacia / Somali flag-adjacent green */
  --gold:        #C98A14; /* accent — frankincense gold, used sparingly */
  --border:      #E3D5BD; /* soft hairline borders on sand */

  /* ---------- DERIVED INK SCALE (warm) ---------- */
  --ink-1:       #16110B; /* primary text */
  --ink-2:       #4A4030; /* secondary text / subheads */
  --ink-3:       #877B66; /* muted / captions / Somali secondary labels */
  --ink-4:       #B6A98E; /* placeholder / disabled text */

  /* ---------- GREEN SCALE ---------- */
  --green-700:   #0B4630; /* pressed / darkest */
  --green-600:   #0F5C3F; /* base brand */
  --green-500:   #167551; /* hover lift */
  --green-tint:  #E4EDE5; /* soft green surface (selected, success bg) */
  --green-border:#C5D8C8; /* green-tinted border */

  /* ---------- GOLD SCALE ---------- */
  --gold-700:    #9A6A0E; /* pressed */
  --gold-600:    #C98A14; /* base accent */
  --gold-500:    #DDA02B; /* hover */
  --gold-tint:   #F4E6C6; /* soft gold surface (badge bg, highlight) */
  --gold-border: #E8D29A;

  /* ---------- SEMANTIC SURFACES ---------- */
  --bg:          var(--sand);
  --surface:     var(--paper);
  --surface-2:   #F1E7D5;  /* recessed sand panel */
  --overlay-scrim: rgba(22, 17, 11, 0.46);

  /* ---------- SEMANTIC STATUS ---------- */
  --success:     #15734E;
  --success-bg:  #E4EDE5;
  --warning:     #C98A14;
  --warning-bg:  #F4E6C6;
  --danger:      #B23A2E; /* warm brick red */
  --danger-bg:   #F6DED9;
  --info:        #2A6F6B; /* teal-ish for variety, used rarely */

  /* ---------- TEXT ROLES ---------- */
  --text-strong: var(--ink-1);
  --text:        var(--ink-1);
  --text-muted:  var(--ink-3);
  --text-second: var(--ink-2);
  --text-on-green: #FBF6EC;
  --text-on-gold:  #2A1D06;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
  /* Fraunces optical/variation: warm + slightly soft */
  --fr-vary: 'opsz' 144, 'SOFT' 30, 'WONK' 0; /* @kind font */

  /* ---------- TYPE SCALE (mobile-first, px) ---------- */
  --t-display:   44px;  /* hero headline */
  --t-h1:        34px;
  --t-h2:        26px;
  --t-h3:        21px;
  --t-title:     18px;  /* card titles */
  --t-body:      16px;  /* default body */
  --t-body-sm:   14px;
  --t-label:     13px;  /* eyebrow / Somali secondary */
  --t-caption:   12px;
  --t-micro:     11px;

  --lh-tight:    1.04;  /* @kind font */
  --lh-snug:     1.18;  /* @kind font */
  --lh-body:     1.5;   /* @kind font */
  --lh-relaxed:  1.62;  /* @kind font */

  --tracking-eyebrow: 0.12em;
  --tracking-tight:  -0.01em;
  --tracking-display:-0.02em;

  /* ---------- SPACING SCALE (4pt base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* ---------- RADII ---------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;  /* default card */
  --r-lg: 22px;  /* large role cards */
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---------- BORDERS ---------- */
  --bw: 1px;
  --bw-2: 1.5px;
  --border-soft: var(--border);
  --border-strong: #D2C09E;

  /* ---------- SHADOWS (warm-tinted, soft) ---------- */
  --shadow-xs: 0 1px 2px rgba(58, 42, 18, 0.06);
  --shadow-sm: 0 1px 3px rgba(58, 42, 18, 0.08), 0 1px 2px rgba(58, 42, 18, 0.06);
  --shadow-md: 0 6px 18px rgba(58, 42, 18, 0.10), 0 2px 6px rgba(58, 42, 18, 0.06);
  --shadow-lg: 0 16px 40px rgba(45, 32, 12, 0.14), 0 4px 12px rgba(45, 32, 12, 0.08);
  --shadow-press: inset 0 2px 4px rgba(45, 32, 12, 0.10);
  --ring-green: 0 0 0 3px rgba(15, 92, 63, 0.18);
  --ring-gold:  0 0 0 3px rgba(201, 138, 20, 0.22);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1);  /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur: 200ms;      /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}

/* =========================================================================
   SEMANTIC TYPE CLASSES
   ========================================================================= */

.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }

.display, .h1, .h2, .h3 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-variation-settings: var(--fr-vary);
  margin: 0;
}

.display {
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
}
.h1 { font-size: var(--t-h1); line-height: var(--lh-snug); font-weight: 700; letter-spacing: var(--tracking-tight); }
.h2 { font-size: var(--t-h2); line-height: var(--lh-snug); font-weight: 600; letter-spacing: var(--tracking-tight); }
.h3 { font-size: var(--t-h3); line-height: var(--lh-snug); font-weight: 600; }

.card-title {
  font-family: var(--font-display);
  font-size: var(--t-title);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--text-strong);
  margin: 0;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--green-600);
}

.p, p, body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--text);
  font-weight: 400;
}

.p-sm   { font-size: var(--t-body-sm); line-height: var(--lh-body); }
.lead   { font-size: var(--t-h3); line-height: var(--lh-relaxed); color: var(--text-second); font-weight: 400; }
.caption{ font-size: var(--t-caption); color: var(--text-muted); line-height: var(--lh-snug); }

/* Somali secondary label — paired under EN labels */
.so {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0;
}
.so-strong { color: var(--gold-700); font-style: italic; font-weight: 500; }

/* =========================================================================
   SOMALI MOTIF — signature textile/silverwork diamond band.
   Reusable divider + header accent. Gold on transparent.
   ========================================================================= */
.motif-band {
  height: 12px;
  width: 100%;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='12'%20viewBox='0%200%2024%2012'%3E%3Cpath%20d='M12%201L23%206L12%2011L1%206Z'%20fill='none'%20stroke='%23C98A14'%20stroke-width='1.3'/%3E%3Ccircle%20cx='12'%20cy='6'%20r='1.3'%20fill='%23C98A14'/%3E%3C/svg%3E") repeat-x center / 24px 12px;
}
.motif-band--green {
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='12'%20viewBox='0%200%2024%2012'%3E%3Cpath%20d='M12%201L23%206L12%2011L1%206Z'%20fill='none'%20stroke='%230F5C3F'%20stroke-width='1.3'/%3E%3Ccircle%20cx='12'%20cy='6'%20r='1.3'%20fill='%230F5C3F'/%3E%3C/svg%3E") repeat-x center / 24px 12px;
}
/* faint full-surface lattice for grounded texture */
.motif-tile {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%20viewBox='0%200%2040%2040'%3E%3Cpath%20d='M20%202L38%2020L20%2038L2%2020Z'%20fill='none'%20stroke='%23C98A14'%20stroke-width='1'%20stroke-opacity='0.18'/%3E%3C/svg%3E");
  background-size: 40px 40px;
}
/* small inline diamond glyph (use before section labels) */
.motif-dot { display: inline-block; width: 9px; height: 9px; transform: rotate(45deg); background: var(--gold-600); border-radius: 1px; flex: 0 0 auto; }
.motif-dot--green { background: var(--green-600); }