/* ============================================================
   IQRAM AHMED PORTFOLIO — tokens.css
   All design tokens as CSS custom properties
   ============================================================ */

/* ----------------------------------------------------------
   SELF-HOSTED FONTS
   Files live in /assets/fonts/ in the theme directory.
   Download from https://gwfh.mranftl.com/fonts/fraunces
   and https://gwfh.mranftl.com/fonts/dm-sans
   Variable fonts used where possible — one file covers
   the full weight/axis range, smaller than multiple statics.

   font-display: swap — page renders with system font
   immediately, swaps to Fraunces/DM Sans when ready.
   This is the correct setting for a portfolio — no blank
   text flash, no render block.
---------------------------------------------------------- */

/* Fraunces — variable (opsz, wght, SOFT, WONK axes) */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-italic-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* DM Sans — variable (wght axis) */
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dm-sans-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dm-sans-italic-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}


:root {

   /* ----------------------------------------------------------
     COLORS — Base
  ---------------------------------------------------------- */
   --color-bg-primary: #0A0A0A;
   --color-bg-secondary: #0D0D0D;
   --color-bg-tertiary: #101010;
   --color-bg-raised: #141414;
   --color-border: #1E1E1E;
   --color-border-mid: #242424;
   --color-border-subtle: #181818;

   /* ----------------------------------------------------------
     COLORS — Text
     Lifted significantly for readability on dark backgrounds,
     especially on high DPI OLED screens (iPhone 15 Pro, S22 Ultra).
     True black backgrounds kill perceived contrast — these values
     compensate for that without blowing out the hierarchy.
  ---------------------------------------------------------- */
   --color-text-primary: #EDEAE2;
   /* Warm off-white — headlines, names */
   --color-text-secondary: #A09D9A;
   /* Mid grey — subheadings, hook text, quotes */
   --color-text-tertiary: #7A7673;
   /* Body copy — readable at 14px+ on dark bg */
   --color-text-muted: #565350;
   /* Supporting text — captions, meta */
   --color-text-ghost: #3D3B38;
   /* Labels, decorative text — intentionally quiet */
   --color-text-deep: #2A2825;
   /* Rail text, index numbers — barely visible by design */

   /* ----------------------------------------------------------
     COLORS — Accent (Warm Amber)
  ---------------------------------------------------------- */
   --color-accent: #C8832A;
   --color-accent-muted: #6B4020;
   --color-accent-subtle: #3F2210;
   --color-accent-deep: #1E0F05;

   /* ----------------------------------------------------------
     COLORS — Semantic
  ---------------------------------------------------------- */
   --color-success: #4A7C59;
   --color-error: #9C4040;

   /* ----------------------------------------------------------
     TYPOGRAPHY — Families
  ---------------------------------------------------------- */
   --font-display: 'Fraunces', Georgia, serif;
   --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
   --font-mono: 'JetBrains Mono', 'Courier New', monospace;

   /* ----------------------------------------------------------
     TYPOGRAPHY — Scale
     Adjusted for high DPI screens:
     --text-xs stays at 11px — only used for purely decorative labels
     --text-sm lifted to 13px — minimum for any readable UI text
     --text-base lifted to 15px — body copy, comfortable on all screens
     --text-md lifted to 16px — slightly emphasized body
  ---------------------------------------------------------- */
   --text-xs: 0.7875rem;
   /* 11px — decorative labels only */
   --text-sm: 0.8125rem;
   /* 13px — meta, captions, nav links */
   --text-base: 1rem;
   /* 15px — body copy */
   --text-md: 1.0625rem;
   /* 16px — slightly emphasized body */
   --text-lg: 1.0825rem;
   /* 17px */
   --text-xl: 1.375rem;
   /* 22px */
   --text-2xl: 1.75rem;
   /* 28px */
   --text-3xl: 2rem;
   /* 32px */
   --text-4xl: 3rem;
   /* 48px */
   --text-hero: 4.75rem;
   /* 76px desktop */

   /* ----------------------------------------------------------
     TYPOGRAPHY — Line Heights
  ---------------------------------------------------------- */
   --leading-tight: 0.95;
   --leading-snug: 1.2;
   --leading-normal: 1.5;
   --leading-relaxed: 1.65;
   --leading-loose: 1.8;

   /* ----------------------------------------------------------
     TYPOGRAPHY — Letter Spacing
  ---------------------------------------------------------- */
   --tracking-tight: -0.04em;
   --tracking-snug: -0.02em;
   --tracking-normal: 0;
   --tracking-wide: 0.05em;
   --tracking-wider: 0.09em;
   --tracking-widest: 0.13em;

   /* ----------------------------------------------------------
     SPACING — 8px base unit
  ---------------------------------------------------------- */
   --space-1: 8px;
   --space-2: 16px;
   --space-3: 24px;
   --space-4: 32px;
   --space-5: 40px;
   --space-6: 48px;
   --space-7: 52px;
   --space-8: 64px;
   --space-9: 80px;
   --space-10: 96px;
   --space-11: 128px;

   /* ----------------------------------------------------------
     LAYOUT
     Max width raised to 1600px to contain layout on wide/
     ultra-wide monitors. The site grid sits inside this boundary
     and dark bg fills the rest — looks intentional on dark themes.
  ---------------------------------------------------------- */
   --site-max-width: 1600px;
   --container-max: 1280px;
   --container-content: 760px;
   --container-narrow: 600px;
   --container-padding: clamp(24px, 4vw, 64px);
   --hero-side-width: 52px;
   --nav-height: 60px;

   /* ----------------------------------------------------------
     BORDER RADIUS
  ---------------------------------------------------------- */
   --radius-sm: 4px;
   --radius-md: 6px;
   --radius-lg: 8px;
   --radius-xl: 12px;
   --radius-full: 9999px;

   /* ----------------------------------------------------------
     BORDERS
  ---------------------------------------------------------- */
   --border-default: 1px solid var(--color-border);
   --border-mid: 1px solid var(--color-border-mid);
   --border-subtle: 1px solid var(--color-border-subtle);
   --border-accent: 1px solid var(--color-accent-subtle);

   /* ----------------------------------------------------------
     TRANSITIONS
  ---------------------------------------------------------- */
   --transition-fast: 150ms ease;
   --transition-base: 200ms ease;
   --transition-slow: 350ms ease;

   /* ----------------------------------------------------------
     Z-INDEX SCALE
  ---------------------------------------------------------- */
   --z-below: -1;
   --z-base: 0;
   --z-raised: 10;
   --z-nav: 100;
   --z-overlay: 200;
   --z-modal: 300;
}