/* ============================================================
   GULFCAP SHARI'AH DIVISION — DESIGN TOKENS
   tokens.css  |  All CSS custom properties for the design system
   ============================================================ */

/* ----------------------------------------------------------
   1. TYPOGRAPHY — Chronicle Display (Self-Hosted)
   ---------------------------------------------------------- */

/* Body / UI font — system-safe serif stack as an alternative incase chronicle display throws a 404 in some devices */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

@font-face {
  font-family: "Chronicle Display";
  src: url("../src/fonts/Chronicle Display Roman.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Chronicle Display";
  src: url("../src/fonts/Chronicle Display Light Italic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Chronicle Display";
  src: url("../src/fonts/Chronicle Display Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Chronicle Display";
  src: url("../src/fonts/Chronicle Display Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --------------------------------------------------------
     2. FONT FAMILIES
     -------------------------------------------------------- */
  --font-display: "Chronicle Display", Georgia, "Times New Roman", serif;
  --font-body: "Chronicle Display", Georgia, "Times New Roman", serif;

  /* Font Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* Type Scale — Major Third (1.250) */
  --text-xs: 0.64rem; /* 10.24px */
  --text-sm: 0.8rem; /* 12.8px */
  --text-li: 0.9rem; /* 14.4px for FAQ lists*/
  --text-base: 1rem; /* 16px */
  --text-md: 1.25rem; /* 20px */
  --text-lg: 1.563rem; /* 25px */
  --text-xl: 1.953rem; /* 31.25px */
  --text-2xl: 2.441rem; /* 39px */
  --text-3xl: 3.052rem; /* 48.8px */
  --text-4xl: 3.815rem; /* 61px */
  --text-5xl: 4.768rem; /* 76.3px */

  /* Line Heights */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;
  --tracking-widest: 0.2em;

  /* --------------------------------------------------------
     3. COLOUR PALETTE — Core Brand
     -------------------------------------------------------- */

  /* Shari'ah Cypress (Primary Green) */
  --color-cypress: #004643;
  --color-cypress-dark: #002e2c; /* deepened for overlays */
  --color-cypress-darker: #001a19; /* near-black green */
  --color-cypress-mid: #005c58; /* hover state */
  --color-cypress-light: #006b65; /* lighter accent */
  --color-cypress-muted: #cddedd; /* tints for backgrounds */
  --color-cypress-subtle: #e8f2f1; /* very light surface */

  /* Shari'ah Gold Brown (Secondary) */
  --color-gold-brown: #b69151;
  --color-gold-brown-dark: #8a6c35; /* deep accent */
  --color-gold-brown-light: #cba96f; /* hover / lighter */
  --color-gold-brown-muted: #f0e5d0; /* warm tint */

  /* GCIB Gold (Accent) */
  --color-gcib-gold: #d4af35;
  --color-gcib-gold-dark: #a88a20;
  --color-gcib-gold-light: #e8cb6a;
  --color-gcib-gold-muted: #faf3d4;

  /* Shari'ah Off Gold (Warm Background) */
  --color-off-gold: #f8f4ee;
  --color-off-gold-dark: #ede6d8;
  --color-off-gold-deeper: #dfd5c0;

  /* GCIB Charcoal (Body Text) */
  --color-charcoal: #404042;
  --color-charcoal-dark: #1f1f20;
  --color-charcoal-mid: #5c5c5e;
  --color-charcoal-light: #7a7a7c;

  /* Shari'ah Grey (Muted UI) */
  --color-grey: #98a2b3;
  --color-grey-dark: #667085;
  --color-grey-light: #d0d5dd;
  --color-grey-subtle: #f2f4f7;

  /* Shari'ah Charts */
  --color-charts: #003b46;
  --color-charts-light: #005262;

  /* GCIB Navy */
  --color-navy: #194788;
  --color-navy-dark: #0f2d5a;
  --color-navy-light: #2a5faa;

  /* Semantic / Utility */
  --color-white: #ffffff;
  --color-black: #0a0a0a;
  --color-success: #2d7a4f;
  --color-warning: #b97a10;
  --color-error: #c0392b;
  --color-info: #194788;

  /* --------------------------------------------------------
     4. GRADIENTS
     -------------------------------------------------------- */

  /* Gold shimmer — for decorative accents */
  --gradient-gold: linear-gradient(
    90deg,
    #b69151 0%,
    #d4af35 50%,
    #b69151 100%
  );

  /* Hero overlay — dark scrim over images */
  --gradient-hero-scrim: linear-gradient(
    to right,
    rgba(0, 70, 67, 0.88) 0%,
    rgba(26, 74, 36, 0.72) 55%,
    rgba(0, 70, 67, 0.1) 100%
  );

  /* Footer gradient */
  --gradient-footer: linear-gradient(
    160deg,
    #001a19 0%,
    #002e2c 60%,
    #004643 100%
  );

  /* Surface glass effect */
  --gradient-glass: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );

  /* --------------------------------------------------------
     5. SPACING SCALE — 4px base
     -------------------------------------------------------- */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --space-20: 5rem; /* 80px */
  --space-24: 6rem; /* 96px */
  --space-32: 8rem; /* 128px */

  /* --------------------------------------------------------
     6. BORDER RADIUS
     -------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 9999px;

  /* --------------------------------------------------------
     7. SHADOWS
     -------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.22);
  --shadow-gold: 0 4px 20px rgba(180, 145, 81, 0.3);
  --shadow-cypress: 0 4px 24px rgba(0, 70, 67, 0.35);
  --shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.12);

  /* --------------------------------------------------------
     8. TRANSITIONS & ANIMATIONS
     -------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;

  --transition-base: all var(--duration-base) var(--ease-in-out);
  --transition-fast: all var(--duration-fast) var(--ease-in-out);
  --transition-slow: all var(--duration-slow) var(--ease-out);

  /* --------------------------------------------------------
     9. Z-INDEX SCALE
     -------------------------------------------------------- */
  --z-below: -1;
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* --------------------------------------------------------
    10. LAYOUT
     -------------------------------------------------------- */
  --container-max: 1280px;
  --container-wide: 1440px;
  --container-narrow: 768px;
  --container-padding: clamp(1rem, 4vw, 2.5rem);

  /* Header heights */
  --header-height: 72px;
  --header-height-scroll: 64px;
  --quicklinks-height: 48px;

  /* --------------------------------------------------------
    11. BORDER & DIVIDER
     -------------------------------------------------------- */
  --border-width: 1px;
  --border-width-thick: 2px;
  --border-color: rgba(152, 162, 179, 0.25);
  --border-color-gold: rgba(182, 145, 81, 0.4);
  --border-color-light: rgba(255, 255, 255, 0.12);

  /* --------------------------------------------------------
    12. FOCUS RING
     -------------------------------------------------------- */
  --focus-ring: 0 0 0 3px rgba(212, 175, 53, 0.5);
  --focus-ring-dark: 0 0 0 3px rgba(0, 70, 67, 0.4);
}