/* ============================================================
   DESIGN TOKENS — Portfolio v2 · Arslan Hussain
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap');

:root {
  /* ── Background ── */
  --color-bg:         #0A0A0A;
  --color-bg-alt:     #0D0D0D;
  --color-surface:    #111111;
  --color-surface-2:  #161616;
  --color-surface-3:  #1C1C1C;

  /* ── Borders ── */
  --color-border:     #1E1E1E;
  --color-border-2:   #2C2C2C;

  /* ── Accent ── */
  --color-accent:     #E53935;
  --color-accent-dim: rgba(229, 57, 53, 0.1);
  --color-accent-2:   #D32F2F;
  --color-accent-glow:rgba(229, 57, 53, 0.12);

  /* ── Text ── */
  --color-text-primary:   #F0EDE8;
  --color-text-secondary: #999999;
  --color-text-muted:     #555555;
  --color-text-inverse:   #0A0A0A;

  /* ── Status ── */
  --color-success: #6BCB77;
  --color-error:   #EF5350;

  /* ── Typography ── */
  --font-serif: 'DM Serif Display', Georgia, serif;
  --font-sans:  'DM Sans', system-ui, -apple-system, sans-serif;

  /* ── Fluid Type Scale ── */
  --text-xs:      clamp(0.68rem,  1vw,    0.75rem);
  --text-sm:      clamp(0.8rem,   1.2vw,  0.875rem);
  --text-base:    clamp(0.9rem,   1.5vw,  1rem);
  --text-md:      clamp(1rem,     1.8vw,  1.125rem);
  --text-lg:      clamp(1.1rem,   2vw,    1.25rem);
  --text-xl:      clamp(1.25rem,  2.5vw,  1.5rem);
  --text-2xl:     clamp(1.5rem,   3vw,    2rem);
  --text-3xl:     clamp(1.75rem,  4vw,    2.75rem);
  --text-4xl:     clamp(2rem,     5vw,    3.5rem);
  --text-5xl:     clamp(2.5rem,   7vw,    5rem);
  --text-display: clamp(2.8rem,   8vw,    7rem);

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Radius ── */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Transitions ── */
  --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:   0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --t-base:   0.3s  cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:   0.5s  cubic-bezier(0.4, 0, 0.2, 1);
  --t-spring: 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ── */
  --container-max:     1200px;
  --container-padding: clamp(1rem, 5vw, 4rem);
  --section-padding:   clamp(3rem, 10vw, 9rem);
  --navbar-h:          68px;

  /* ── Z-Index ── */
  --z-sticky: 100;
  --z-modal:  1000;
  --z-toast:  2000;

  /* ── Shadows ── */
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.5);
  --shadow-md:     0 4px 20px rgba(0,0,0,0.5);
  --shadow-lg:     0 8px 40px rgba(0,0,0,0.6);
  --shadow-accent: 0 0 40px rgba(201, 169, 110, 0.08);
}

/* ── Light Mode Overrides ── */
[data-theme="light"] {
  --color-bg:             #FDFCFB;
  --color-bg-alt:         #F7F5F2;
  --color-surface:        #FFFFFF;
  --color-surface-2:      #F0EEEA;
  --color-surface-3:      #E8E5E0;
  --color-border:         #E5E2DD;
  --color-border-2:       #D8D4CE;

  --color-text-primary:   #1A1A1A;
  --color-text-secondary: #555555;
  --color-text-muted:     #888888;
  --color-text-inverse:   #FDFCFB;

  --shadow-sm:            0 1px 3px rgba(0,0,0,0.05);
  --shadow-md:            0 4px 20px rgba(0,0,0,0.05);
  --shadow-lg:            0 8px 40px rgba(0,0,0,0.08);
  --shadow-accent:        0 0 40px rgba(201, 169, 110, 0.05);
}