/**
 * Danish Khan website design tokens.
 *
 * Visual direction:
 * warm editorial personal website
 * Jost for headings and interface text
 * EB Garamond for editorial supporting copy
 * cream and white surfaces
 * near-black text
 * yellow accent
 * restrained borders and shadows
 */

:root {
  /* =========================================================
       COLORS
       ========================================================= */

  --color-bg: #ffffff;

  --color-surface: #f8f6f1;
  --color-surface-soft: #f4f1e9;
  --color-surface-raised: #ffffff;

  --color-text-primary: #171717;
  --color-text-secondary: #404040;
  --color-text-muted: #737373;
  --color-text-soft: #8a8a8a;

  --color-text-on-accent: #171717;
  --color-text-inverse: #ffffff;

  --color-accent-primary: #facc15;
  --color-accent-primary-hover: #eabf12;
  --color-accent-primary-active: #d8ad0f;

  --color-accent-secondary: #171717;

  --color-accent-tint: #fdf7dc;
  --color-accent-tint-soft: #fffbea;

  --color-border: #e4e1d8;
  --color-border-soft: #ece9e1;
  --color-border-strong: #b3b09d;

  --color-focus: #171717;

  --color-dark-section: #171717;
  --color-dark-section-text: #ffffff;
  --color-dark-section-muted: #c7c7c7;
  --color-dark-section-border: #393939;

  /* =========================================================
       STATUS COLORS
       ========================================================= */

  --color-success: #15803d;
  --color-success-tint: #eafaf0;

  --color-warning: #b45309;
  --color-warning-tint: #fff7ed;

  --color-error: #b91c1c;
  --color-error-tint: #fdf0f0;

  /* =========================================================
       TYPOGRAPHY
       ========================================================= */

  --font-sans:
    "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;

  --font-serif: "EB Garamond", Georgia, "Times New Roman", serif;

  /*
     * Reference-style typography hierarchy.
     *
     * Display:
     * 56px desktop
     *
     * Major sections:
     * approximately 40px
     */

  --text-display: 500 3.5rem / 1.1 var(--font-sans);

  --text-h1: 500 3rem / 1.1 var(--font-sans);

  --text-h2: 500 2.5rem / 1.1 var(--font-sans);

  --text-h3: 500 1.5rem / 1.3 var(--font-sans);

  --text-h4: 500 1.125rem / 1.4 var(--font-sans);

  --text-body-lg: 500 1.25rem / 1.5 var(--font-serif);

  --text-body: 400 1rem / 1.65 var(--font-sans);

  --text-small: 400 0.875rem / 1.55 var(--font-sans);

  --text-caption: 400 0.75rem / 1.5 var(--font-sans);

  --text-label: 500 0.875rem / 1.3 var(--font-sans);

  --text-button: 600 1rem / 1.25 var(--font-sans);

  /* =========================================================
       LETTER SPACING
       ========================================================= */

  --letter-spacing-display: -0.031rem;
  --letter-spacing-h1: -0.025em;
  --letter-spacing-h2: -0.025em;
  --letter-spacing-h3: -0.015em;

  --letter-spacing-label: 0.04em;
  --letter-spacing-eyebrow: 0.06em;

  /* =========================================================
       SPACING
       4px base system
       ========================================================= */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 5rem;
  --space-10: 6rem;
  --space-11: 7.5rem;
  --space-12: 9rem;

  /* =========================================================
       PAGE LAYOUT
       ========================================================= */

  --max-page-width: 1200px;

  --content-width: 1060px;

  --section-width: 920px;

  --reading-width: 65ch;

  /*
     * Reference uses a slightly inset white content shell
     * against the cream hero.
     */

  --page-shell-width: 93.333333%;

  /* =========================================================
       GUTTERS
       ========================================================= */

  --gutter-desktop: 2rem;
  --gutter-tablet: 1.5rem;
  --gutter-mobile: 1rem;

  /* =========================================================
       SECTION RHYTHM
       ========================================================= */

  --section-space-desktop: 7.5rem;
  --section-space-tablet: 5rem;
  --section-space-mobile: 4rem;

  --hero-space-top: 4rem;
  --hero-space-bottom: 7.5rem;

  /* =========================================================
       RADII
       ========================================================= */

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --radius-section: 12px;

  --radius-full: 999px;

  /* =========================================================
       SHADOWS
       ========================================================= */

  --shadow-sm: 0 1px 2px rgba(23, 23, 23, 0.05);

  --shadow-md: 0 8px 24px rgba(23, 23, 23, 0.07);

  --shadow-lg: 0 20px 48px rgba(23, 23, 23, 0.1);

  /* =========================================================
       MOTION
       ========================================================= */

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;

  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* =========================================================
       ACCESSIBILITY
       ========================================================= */

  --tap-target-min: 44px;
}

/* =============================================================
   TABLET TYPOGRAPHY
   ============================================================= */

@media (max-width: 1024px) {
  :root {
    --text-display: 500 3rem / 1.12 var(--font-sans);

    --text-h1: 500 2.75rem / 1.12 var(--font-sans);

    --text-h2: 500 2.25rem / 1.15 var(--font-sans);

    --section-space-desktop: 5rem;
  }
}

/* =============================================================
   MOBILE TYPOGRAPHY
   ============================================================= */

@media (max-width: 768px) {
  :root {
    --text-display: 500 2.375rem / 1.18 var(--font-sans);

    --text-h1: 500 2.25rem / 1.15 var(--font-sans);

    --text-h2: 500 1.75rem / 1.28 var(--font-sans);

    --text-h3: 500 1.375rem / 1.35 var(--font-sans);

    --text-body-lg: 500 1.125rem / 1.55 var(--font-serif);

    --hero-space-top: 2rem;
    --hero-space-bottom: 4rem;
  }
}

/* =============================================================
   REDUCED MOTION
   ============================================================= */

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