/* ==========================================================================
   tokens.css — Design System Primitives
   All CSS custom properties for the Fadiyaat theme.
   Loaded first, before base.css or any component CSS.
   Reference: docs/DESIGN-SYSTEM.md
   ========================================================================== */

/* ── @font-face ─────────────────────────────────────────────────────────── */

@font-face {
  font-family: "SF Pro AR Display";
  src: url("../fonts/SFProARDisplay_regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro AR Display";
  src: url("../fonts/SFProARDisplay_semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro AR Display";
  src: url("../fonts/SFProARDisplay_bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro AR Text";
  src: url("../fonts/SFProARText_regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro AR Text";
  src: url("../fonts/SFProARText_semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ── Root tokens ─────────────────────────────────────────────────────────── */

:root {

  /* Colors */
  --color-bg:           #0E0E24;
  --color-main:         #0E0E24;
  --color-light:        #D7D6FF;
  --color-lite:         #504CEE;
  --color-secondary:    #E2CCBB;
  --color-black:        #000000;
  --color-white:        #FFFFFF;
  --color-text:         #FFFFFF;
  --color-text-muted:   rgba(215, 214, 255, 0.65);
  --color-border:       rgba(255, 255, 255, 0.08);

  /* Gradients */
  --gradient-glass:
    linear-gradient(
      180deg,
      rgba(149, 146, 255, 0.30) 0%,
      rgba(80,  76, 238, 0.00) 100%
    );

  --gradient-glass-stroke:
    radial-gradient(circle at 50%   0%, rgba(255,255,255,0.50) 0%, rgba(255,255,255,0.00) 60%),
    radial-gradient(circle at 50% 100%, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.10) 100%);

  --gradient-main:
    radial-gradient(circle at 50% 50%, #7875F8 0%, #504CEE 100%);

  /* Typography */
  --font-display: "SF Pro AR Display", system-ui, -apple-system, sans-serif;
  --font-text:    "SF Pro AR Text",    system-ui, -apple-system, sans-serif;

  /* Type scale — desktop */
  --fs-h1:      clamp(2.25rem, 5vw, 3.5rem);   /* 36–56px fluid */
  --fs-h2:      clamp(1.75rem, 3.5vw, 2.5rem); /* 28–40px */
  --fs-h3:      clamp(1.25rem, 2.5vw, 1.75rem);/* 20–28px */
  --fs-h4:      clamp(1.1rem,  2vw,   1.375rem);/* 17.6–22px */
  --fs-body:    1rem;       /* 16px */
  --fs-body-sm: 0.875rem;   /* 14px */
  --fs-label:   0.8125rem;  /* 13px */

  /* Line heights */
  --lh-heading: 1.2;
  --lh-body:    1.6;
  --lh-label:   1.4;

  /* Spacing scale (4-px base) */
  --space-0:  0;
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  3rem;      /* 48px */
  --space-8:  4rem;      /* 64px */
  --space-9:  6rem;      /* 96px */
  --space-10: 8rem;      /* 128px */
  --space-11: 10rem;     /* 160px */
  --space-12: 12rem;     /* 192px */

  /* Border radii */
  --radius-sm:   0.5rem;     /*  8px */
  --radius-md:   1rem;       /* 16px */
  --radius-lg:   1.5rem;     /* 24px */
  --radius-pill: 999px;

  /* Shadows */
  --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-cta:  0 8px  24px rgba(80, 76, 238, 0.45);

  /* Motion */
  --motion-fast: 150ms cubic-bezier(.2,.8,.2,1);
  --motion-base: 240ms cubic-bezier(.2,.8,.2,1);
  --motion-slow: 400ms cubic-bezier(.2,.8,.2,1);

  /* Layout */
  --container-max:        1280px;
  --container-pad-inline: clamp(1rem, 4vw, 3rem);

  /* Breakpoints as reference (use literal values in @media) */
  /* --bp-xs: 375, --bp-sm: 480, --bp-md: 768,
     --bp-lg: 1024, --bp-xl: 1280, --bp-2xl: 1440, --bp-3xl: 1920 */
}

/* ── Reduced motion override ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }
}