/* ============================================================
   Kepri design tokens — from KEPRI_DESIGN_SYSTEM.md, the merge of
   Kepri_Brand_Guidelines_V1.0.pdf + kepri_mobile/lib/ui/theme/.
   Ramp hexes mirror KepriBrand (quoted vs derived per the code).
   Three tiers: primitive → semantic → component (no hex below
   this file — components consume semantic vars only).
   ============================================================ */

:root {
  /* ---- primitives: the teal scale ("one teal, ten steps") ---- */
  --c-teal-50:  #E6F7FA;   /* quoted — Light Tint */
  --c-teal-100: #CCF0F4;   /* derived — progress tracks */
  --c-teal-200: #99E0E9;   /* derived — disabled fills */
  --c-teal-300: #66D1DF;   /* derived — snackbar action */
  --c-teal-400: #33C1D4;   /* derived — teal text on dark */
  --c-teal-500: #00B2CA;   /* quoted — Kepri Teal, the anchor */
  --c-teal-600: #008B9E;   /* derived — hover / pressed */
  --c-teal-700: #006472;   /* quoted — Dark Teal (text-safe on light) */
  --c-teal-800: #004E5A;   /* derived */
  --c-teal-900: #003941;   /* quoted — Ink */

  /* ---- primitives: brand neutrals & accent (all quoted) ---- */
  --c-paper: #F5F7F8;
  --c-grey:  #7A8A93;      /* AA-Large only — large labels & non-text uses */
  --c-grey-700: #5B6E76;   /* derived shade of Grey — 4.9:1, AA for the small
                              supporting copy Grey itself can't carry (F16) */
  --c-amber-500: #CA7C00;  /* accent — sparing, never icons */
  --c-amber-300: #E9B04C;  /* derived tint — the accent on dark grounds */
  --c-amber-100: #F7ECD9;

  /* ---- primitives: premium tier (quoted) ---- */
  --c-premium-deep:      #0A3A40;
  --c-premium-champagne: #D9C28E;
  --c-premium-softink:   #1A2C2F;
  --c-premium-pearl:     #F4F1EA;

  /* ---- primitives: system colours (quoted — not brand colours) ---- */
  --c-success-500: #2E9E6B;  --c-success-100: #E3F3EC;
  --c-error-500:   #C0473D;  --c-error-100:   #F7E6E4;
  --c-warn-500:    #C8941F;  --c-warn-100:    #F7EFDC;
  --c-info-500:    #2A7DB0;  --c-info-100:    #E3EFF6;

  /* ---- primitives: derived neutrals (theme code) ---- */
  --c-border-light: #D8E0E3;   /* tint of Grey */
  --c-border-dark:  #2C4247;   /* shade of Soft Ink */

  /* ---- semantic (light mode default) ---- */
  --bg:          var(--c-paper);
  --card:        #FFFFFF;
  --text:        var(--c-teal-900);       /* Ink — never pure black */
  --muted:       var(--c-grey-700);       /* AA at 12–14px; brand Grey is AA-Large only */
  --faint:       rgba(0, 57, 65, .07);
  --border:      var(--c-border-light);
  --border-strong: var(--c-grey);

  --action:        var(--c-teal-500);  /* fills, FAB, active nav */
  --action-hover:  var(--c-teal-600);
  --action-ink:    #FFFFFF;            /* on teal */
  --action-tint:   var(--c-teal-50);   /* icon chips, selected bg */
  --action-disabled: var(--c-teal-200);
  --brand-deep:    var(--c-teal-700);  /* teal text that passes on light (AA) */
  --brand-ink:     var(--c-teal-900);
  --price:         var(--c-teal-700);
  --link:          var(--c-teal-700);

  --accent:        var(--c-amber-500);
  --accent-tint:   var(--c-amber-100);
  --accent-deep:   #9C5F00;   /* amber step that holds white text */
  --accent-ink:    #8A5400;   /* amber step readable on the amber tint */

  --success:      var(--c-success-500);  --success-tint: var(--c-success-100);
  --error:        var(--c-error-500);    --error-tint:   var(--c-error-100);
  --warn:         var(--c-warn-500);     --warn-tint:    var(--c-warn-100);
  --info:         var(--c-info-500);     --info-tint:    var(--c-info-100);

  /* text-safe status steps for use ON the tinted fills (4.5:1+) */
  --success-ink:  #1F7A50;
  --error-ink:    #8A312A;
  --warn-ink:     #755311;
  --info-ink:     #21618A;
  --error-text:   var(--c-error-500);   /* error text on bg/card */

  --premium:       var(--c-premium-deep);
  --premium-hi:    var(--c-premium-champagne);

  /* shimmer sits in the tint family, not neutral grey */
  --shimmer-base: var(--c-teal-50);
  --shimmer-hi:   rgba(255, 255, 255, .75);

  --shadow-card:  0 1px 3px rgba(0, 57, 65, .06);
  --shadow-float: 0 6px 18px rgba(0, 57, 65, .16);

  /* ---- shape (theme code: radiusControl 10 / tiles 12 / card 16 / sheet 24) ---- */
  --r-btn: 10px;
  --r-tile: 12px;
  --r-card: 16px;
  --r-sheet: 24px;

  /* ---- spacing (base 4) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px;

  /* ---- type scale (legacy Font sizes; floor raised to 12) ---- */
  --f-smaller: 12px; --f-small: 12px; --f-normal: 14px;
  --f-large: 16px;   --f-larger: 18px;
  --f-xl: 24px;      --f-xxl: 28px;

  color-scheme: light;
}

/* ---- dark mode: grounded in the CORE teal family (Ink ground, Teal-800
   cards). The premium palette (Soft Ink / Deep Teal / champagne) is reserved
   for premium-tier contexts per brand p.25 — it no longer styles core dark
   mode (audit F11). Amber remains the accent in both themes. ---- */
:root[data-theme="dark"] {
  --bg:     var(--c-teal-900);        /* Ink — quoted core neutral */
  --card:   var(--c-teal-800);
  --text:   var(--c-paper);
  --muted:  rgba(245, 247, 248, .78);
  --faint:  rgba(245, 247, 248, .08);
  --border: var(--c-border-dark);
  --border-strong: #52686E;

  --action-tint: rgba(0, 178, 202, .16);
  --brand-deep:  var(--c-teal-300);   /* ≥4.5:1 on Ink and Teal-800 */
  --brand-ink:   var(--c-teal-200);
  --price:       var(--c-teal-300);
  --link:        var(--c-teal-300);   /* 5.3:1 on Teal-800 cards (Teal-400 is 4.3) */

  --accent:      var(--c-amber-300);  /* amber accent, dark-legible step */
  --accent-tint: rgba(202, 124, 0, .2);
  --accent-ink:  var(--c-amber-300);

  --success-tint: rgba(46, 158, 107, .18);
  --error-tint:   rgba(192, 71, 61, .18);
  --warn-tint:    rgba(200, 148, 31, .18);
  --info-tint:    rgba(42, 125, 176, .18);

  --success-ink:  #5EC698;
  --error-ink:    #F2ADA4;
  --warn-ink:     #EBC878;
  --info-ink:     #7CBCE4;
  --error-text:   #E8968C;

  --shimmer-base: var(--c-teal-700);        /* card ground is 800 now */
  --shimmer-hi:   rgba(51, 193, 212, .3);   /* Teal 400 highlight */

  --shadow-card:  0 1px 3px rgba(0, 0, 0, .4);
  --shadow-float: 0 6px 18px rgba(0, 0, 0, .5);

  color-scheme: dark;
}

/* ---- self-hosted brand typeface: Zain (EN + AR, one family).
   Roles: Regular 400 — headings & wordmark · Light 300 — body.
   No 500/600 cuts exist; semibold requests resolve to Bold 700. ---- */
@font-face {
  font-family: 'Zain'; font-weight: 300; font-style: normal;
  src: url('../fonts/Zain-Light.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Zain'; font-weight: 400; font-style: normal;
  src: url('../fonts/Zain-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Zain'; font-weight: 700; font-style: normal;
  src: url('../fonts/Zain-Bold.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Zain'; font-weight: 800; font-style: normal;
  src: url('../fonts/Zain-ExtraBold.ttf') format('truetype');
  font-display: swap;
}