/*
Theme Name: ZeeshanWorks
Theme URI: https://zeeshanworks.com/
Version: 1.0.0
Author: Muhammad Zeeshan
Author URI: https://zeeshanworks.com
Description: This is a custom personal portfolio theme.
Text Domain: zeeshanworks
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: portfolio, custom theme, blog, SEO Optimized, personal
*/

*, *::before, *::after { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}

/* Web Fonts */

/* Inter */
@font-face{
    font-family: 'Inter';
    font-weight: 400;
    src: url('assets/webfonts/Inter_18pt-Regular.ttf');
    font-display: swap;
}

@font-face{
    font-family: 'Inter';
    font-weight: 500;
    src: url('assets/webfonts/Inter_18pt-Medium.ttf');
    font-display: swap;
}

@font-face{
    font-family: 'Inter';
    font-weight: 700;
    src: url('assets/webfonts/Inter_24pt-Bold.ttf');
    font-display: swap;
}

@font-face{
    font-family: 'Inter';
    font-weight: 300;
    src: url('assets/webfonts/Inter_18pt-ExtraLight.ttf');
    font-display: swap;
}

/* ==============================
   Mulish
   ============================== */
@font-face {
  font-family: 'Mulish';
  font-weight: 400;
  src: url('assets/webfonts/Mulish-Regular.ttf');
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  font-weight: 600;
  src: url('assets/webfonts/Mulish-SemiBold.ttf');
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  font-weight: 700;
  src: url('assets/webfonts/Mulish-Bold.ttf');
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  font-weight: 800;
  src: url('assets/webfonts/Mulish-ExtraBold.ttf');
  font-display: swap;
}

/* PoetsenOne */

@font-face {
  font-family: 'PoetsenOne';
  font-weight: 400;
  src: url('assets/webfonts/PoetsenOne-Regular.ttf');
  font-display: swap;
}


/* Global Color Tokens */


/* Global Syles */

/* ============================================================
   DESIGN TOKENS
   Single source of truth for the entire portfolio site.
   Import this file first, before any other stylesheet.
   ============================================================ */

:root {

  /* ── Typography ──────────────────────────────────────────── */
  --primary-font: 'Inter', sans-serif;
  --secondary-font: 'PoetsenOne', sans-serif;
  --accent-font: 'Mulish', sans-serif;

  --text-xs: 0.75rem;
  /*  12px */
  --text-sm: 0.82rem;
  /*  ~13px */
  --text-base: 1rem;
  /*  16px */
  --text-md: 1.13rem;
  /*  ~18px */
  --text-lg: 1.25rem;
  /*  20px */
  --text-xl: 1.42rem;
  /*  ~23px */
  --text-2xl: clamp(2rem, 4vw, 2.6rem);
  --text-3xl: clamp(2.4rem, 5vw, 3.2rem);
  --text-4xl: clamp(2rem, 4vw, 2.8rem);
  --text-hero: clamp(3rem, 6vw, 4.5rem);
  /* 72 px at large screens */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --leading-tight: 1.15;
  --leading-snug: 1.2;
  --leading-normal: 1.35;
  --leading-relaxed: 1.6;
  --leading-loose: 1.7;

  /* ── Colour – Brand ──────────────────────────────────────── */
  --color-brand: #5B33E6;
  --color-brand-dark: #4a25d4;
  --color-brand-deeper: #532ED1;
  --color-brand-rich: #4f35e8;
  --color-brand-rich-hover: #3a22d4;

  --color-brand-soft: #f3f0ff;
  --color-brand-pale: #ede9fd;
  --color-brand-muted: #CCC0F7;

  /* ── Colour – Neutrals ───────────────────────────────────── */
  --color-ink: #1a1a2e;
  --color-ink-alt: #202124;
  --color-ink-deep: #282A2D;
  --color-ink-richest: #11142D;

  --color-text-body: #3C4043;
  --color-text-muted: #5F6368;
  --color-text-subtle: #80868B;
  --color-text-faint: #9AA0A6;
  --color-text-ghost: #92929D;
  --color-text-placeholder: #8a8a9a;

  --color-white: #ffffff;
  --color-white-glass: rgba(255, 255, 255, 0.85);

  /* ── Colour – Borders ────────────────────────────────────── */
  --color-border-base: #DADCE0;
  --color-border-light: #e0e0e0;
  --color-border-lighter: #e8e8e8;
  --color-border-contact: #e0e0ec;
  --color-border-subtle: #f0f0f0;
  --color-border-purple: rgba(120, 120, 180, 0.18);

  /* ── Colour – Status / Semantic ─────────────────────────── */
  --color-success: #2FB551;
  --color-star: #e8855a;

  /* ── Colour – Stat-card accents ─────────────────────────── */
  --color-stat-1: #CCC0F7;
  --color-stat-2: #FEC5C2;
  --color-stat-3: #C0EECC;
  --color-stat-4: #FFE9B9;

  /* ── Spacing scale ───────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 70px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Border-radius ───────────────────────────────────────── */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 9px;
  --radius-base: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 22px;
  --radius-4xl: 25px;
  --radius-card: var(--radius-xl);
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-xs: 1px 2px 12px 0 rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.10);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 8px 32px rgba(80, 60, 180, 0.13), 0 2px 8px rgba(0, 0, 0, 0.06);

  --shadow-brand-sm: 0 4px 16px rgba(91, 51, 230, 0.30);
  --shadow-brand-md: 0 6px 20px rgba(91, 51, 230, 0.40);
  --shadow-brand-lg: 0 8px 24px rgba(91, 63, 248, 0.28);
  --shadow-brand-card: 0 2px 14px rgba(90, 70, 180, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-brand-hover: 0 10px 32px rgba(90, 70, 180, 0.16), 0 2px 8px rgba(0, 0, 0, 0.06);

  --shadow-pill-glass:
    0 4px 24px rgba(0, 0, 0, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.80) inset;

  /* ── Transitions ─────────────────────────────────────────── */
  --ease-fast: 0.18s ease;
  --ease-mid: 0.22s ease;
  --ease-slow: 0.25s ease;
  --ease-spring: 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-smooth: 1s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-index ─────────────────────────────────────────────── */
  --z-header: 1000;

  /* ── Backdrop / glass ────────────────────────────────────── */
  --blur-glass: blur(16px);

  /* ── Layout ──────────────────────────────────────────────── */
  --max-width: 1440px;
  --header-social-w: 160px;
}

body {
  font-family: var(--primary-font);
}

h2 {
  font-family: var(--secondary-font);
}

h3 {
  font-family: var(--primary-font);
}

h4 {
  font-family: var(--primary-font);
}

p {
  font-family: var(--primary-font);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
}

a {
  font-family: var(--primary-font);
}

span {
  font-family: inherit;
}