/* ============================================================
   Design tokens — AL AMAL Contracting & Trading
   Single source of truth for color, type, spacing, motion.
   ============================================================ */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/fraunces-var.woff2') format('woff2-variations'),
       url('../assets/fonts/fraunces-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../assets/fonts/manrope-var.woff2') format('woff2-variations'),
       url('../assets/fonts/manrope-var.woff2') format('woff2');
}

:root {
  /* ---- Color: brand ---- */
  --c-navy:    #123f6d;
  --c-orange:  #f7941d;
  --c-coral:   #f15a29;
  --c-steel:   #437696;
  --c-ink:     #58595b;
  --c-mute:    #a7a9ac;
  --c-line:    #e6e7e8;
  --c-surface: #f1f2f2;
  --c-bone:    #ffffff;
  --c-navy-deep: #0d2e51;

  /* ---- Color: semantic ---- */
  --c-bg:           var(--c-bone);
  --c-bg-alt:       var(--c-surface);
  --c-bg-dark:      var(--c-navy);
  --c-bg-darker:    var(--c-navy-deep);

  --c-text:         var(--c-ink);
  --c-text-strong:  var(--c-navy);
  --c-text-meta:    var(--c-mute);
  --c-text-on-dark: var(--c-bone);
  --c-text-on-dark-meta: rgba(255, 255, 255, 0.62);

  --c-accent:       var(--c-orange);
  --c-accent-hover: var(--c-coral);

  --c-border:       var(--c-line);
  --c-border-strong: rgba(18, 63, 109, 0.18);
  --c-border-on-dark: rgba(255, 255, 255, 0.18);

  --c-focus-ring:   var(--c-orange);

  /* ---- Type families ---- */
  --ff-display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
  --ff-sans:    'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Fraunces variation defaults — low SOFT (subtle, editorial), display opsz */
  --fvar-display: "opsz" 72, "SOFT" 30, "wght" 600;
  --fvar-heading: "opsz" 36, "SOFT" 30, "wght" 600;
  --fvar-body-serif: "opsz" 14, "SOFT" 30, "wght" 400;

  /* ---- Type scale (8 fluid steps) ---- */
  --fs-display: clamp(3.25rem, 8vw, 7rem);     /* hero, final CTA */
  --fs-h1:      clamp(2.5rem, 5vw, 4.5rem);    /* page headlines */
  --fs-h2:      clamp(1.875rem, 3.5vw, 3rem);  /* section headlines */
  --fs-h3:      clamp(1.375rem, 2vw, 1.75rem); /* card / project titles */
  --fs-lg:      clamp(1.125rem, 1.4vw, 1.25rem); /* lead / subhead */
  --fs-body:    1rem;                          /* body */
  --fs-sm:      0.875rem;                      /* meta, captions */
  --fs-xs:      0.75rem;                       /* eyebrows */

  --lh-display: 0.95;
  --lh-heading: 1.08;
  --lh-snug:    1.3;
  --lh-body:    1.6;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-eyebrow: 0.18em;

  /* ---- Spacing (4px base) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 40px;
  --sp-6: 64px;
  --sp-7: 96px;
  --sp-8: 128px;

  /* ---- Section + container ---- */
  --section-py:  clamp(80px, 8vw, 160px);
  --section-px:  clamp(20px, 4vw, 64px);
  --container-max: 1440px;
  --container-wide-max: 1760px;

  /* ---- Radii (minimal — brand is sharp) ---- */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(18, 63, 109, 0.06);
  --shadow-md: 0 8px 24px rgba(18, 63, 109, 0.08);
  --shadow-lg: 0 24px 64px rgba(18, 63, 109, 0.12);

  /* ---- Breakpoints (as CSS vars for reference) ---- */
  --bp-xs:  360px;
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1440px;
  --bp-3xl: 1536px;
  --bp-4xl: 1920px;
  --bp-5xl: 2560px;

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in:     cubic-bezier(0.5, 0, 0.75, 0);

  --dur-quick: 150ms;
  --dur-fast:  220ms;
  --dur-base:  400ms;
  --dur-slow:  700ms;
  --dur-slower: 1100ms;

  /* ---- Chrome ---- */
  --header-h:  clamp(64px, 7vw, 88px);
  --header-h-scrolled: clamp(56px, 6vw, 72px);
  --z-header:  100;
  --z-drawer:  200;
  --z-toast:   300;

  /* ---- Brand angular corner geometry ----
     The clip-path polygon for the brand's angular cut.
     Tuned to match the ~25-30deg cut seen across the brand pack.    */
  --corner-cut: 38%;
}

/* ============================================================
   Brand angular corner — reusable utility
   Variants set background color; corner-position class sets where
   it sits relative to its parent.
   ============================================================ */

.brand-corner {
  --bc-w: clamp(80px, 14vw, 220px);
  --bc-h: clamp(28px, 4.5vw, 60px);
  position: absolute;
  width: var(--bc-w);
  height: var(--bc-h);
  pointer-events: none;
  z-index: 2;
}

.brand-corner--orange { background: var(--c-orange); }
.brand-corner--coral  { background: var(--c-coral); }
.brand-corner--navy   { background: var(--c-navy); }
.brand-corner--steel  { background: var(--c-steel); }
.brand-corner--bone   { background: var(--c-bone); }

/* Top-left: shape narrows toward bottom-right */
.brand-corner--tl {
  inset-block-start: 0;
  inset-inline-start: 0;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--corner-cut)) 100%, 0 100%);
}
/* Top-right: shape narrows toward bottom-left */
.brand-corner--tr {
  inset-block-start: 0;
  inset-inline-end: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--corner-cut) 100%);
}
/* Bottom-right: shape narrows toward top-left */
.brand-corner--br {
  inset-block-end: 0;
  inset-inline-end: 0;
  clip-path: polygon(var(--corner-cut) 0, 100% 0, 100% 100%, 0 100%);
}
/* Bottom-left: shape narrows toward top-right */
.brand-corner--bl {
  inset-block-end: 0;
  inset-inline-start: 0;
  clip-path: polygon(0 0, calc(100% - var(--corner-cut)) 0, 100% 100%, 0 100%);
}

/* A larger variant for hero anchors */
.brand-corner--lg {
  --bc-w: clamp(140px, 22vw, 360px);
  --bc-h: clamp(48px, 7vw, 110px);
}

/* A compact variant for cards/dividers */
.brand-corner--sm {
  --bc-w: clamp(48px, 6vw, 100px);
  --bc-h: clamp(18px, 2.5vw, 32px);
}