/* ============================================================
   DESIGN TOKENS
   Portfolio — Midnight Mint + General Sans
   ============================================================ */

/* ── BREAKPOINTS ──────────────────────────────────────────
   CSS doesn't support custom properties inside @media rules,
   so this is documentation. Use these exact values everywhere.

   mobile:   ≤ 480px
   tablet:   481–768px
   laptop:   769–1199px
   desktop:  1200–1599px
   wide:     1600–1999px
   xl:       ≥ 2000px
   ────────────────────────────────────────────────────── */

@import url('https://api.fontshare.com/v2/css?f[]=general-sans@300,400,500,600,700&display=swap');

:root {

  /* ── COLOR ─────────────────────────────────────────────── */

  /* Accent */
  --color-accent:           #4DFFC0;
  --color-accent-dim:       #4DFFC015;
  --color-accent-hover:     #6FFFC9;  /* ~8% lighter for hover states */

  /* Surface */
  --color-bg:               #0A0A0A;  /* Canvas */
  --color-surface:          #141414;  /* Cards, panels */
  --color-surface-raised:   #1C1C1C;  /* Hover, elevated */

  /* Border */
  --color-border:           #272727;
  --color-border-subtle:    #1E1E1E;

  /* Text */
  --color-text-primary:     #F2ECD8;  /* Headlines, high emphasis */
  --color-text-secondary:   #7A7670;  /* Body, meta, captions */
  --color-text-disabled:    #404040;  /* Inactive, placeholder */
  --color-text-on-accent:   #0A0A0A;  /* Text sitting on accent bg */


  /* ── TYPOGRAPHY ────────────────────────────────────────── */

  --font-sans: 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Scale — major third (1.25) */
  --text-xs:    0.75rem;   /*  12px */
  --text-sm:    0.875rem;  /*  14px */
  --text-base:  1rem;      /*  16px */
  --text-lg:    1.125rem;  /*  18px */
  --text-xl:    1.25rem;   /*  20px */
  --text-2xl:   1.5rem;    /*  24px */
  --text-3xl:   1.875rem;  /*  30px */
  --text-4xl:   2.25rem;   /*  36px */
  --text-5xl:   3rem;      /*  48px */
  --text-6xl:   3.75rem;   /*  60px */
  --text-7xl:   4.5rem;    /*  72px */
  --text-8xl:   6rem;      /*  96px */

  /* Fluid scale — for elements that should grow with viewport.
     Parallel to the fixed scale; use either depending on intent. */
  --text-fluid-sm:      clamp(14px, 1vw, 16px);
  --text-fluid-base:    clamp(16px, 1.1vw, 18px);
  --text-fluid-lg:      clamp(18px, 1.3vw, 22px);
  --text-fluid-xl:      clamp(20px, 1.6vw, 28px);
  --text-fluid-2xl:     clamp(28px, 3vw, 40px);
  --text-fluid-3xl:     clamp(36px, 5vw, 64px);
  --text-fluid-display: clamp(56px, 9vw, 160px);

  /* Weights */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* Leading */
  --leading-tight:    0.95;
  --leading-snug:     1.2;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;

  /* Tracking */
  --tracking-tighter: -0.04em;  /* Display headlines */
  --tracking-tight:   -0.025em; /* Statement text */
  --tracking-snug:    -0.01em;  /* Body, UI labels */
  --tracking-normal:   0em;
  --tracking-wide:     0.06em;  /* Eyebrows, caps labels */
  --tracking-wider:    0.1em;   /* Small caps */


  /* ── SPACING ───────────────────────────────────────────── */
  /* 4px base grid */
  --space-1:    0.25rem;   /*  4px */
  --space-2:    0.5rem;    /*  8px */
  --space-3:    0.75rem;   /* 12px */
  --space-4:    1rem;      /* 16px */
  --space-5:    1.25rem;   /* 20px */
  --space-6:    1.5rem;    /* 24px */
  --space-8:    2rem;      /* 32px */
  --space-10:   2.5rem;    /* 40px */
  --space-12:   3rem;      /* 48px */
  --space-16:   4rem;      /* 64px */
  --space-20:   5rem;      /* 80px */
  --space-24:   6rem;      /* 96px */
  --space-32:   8rem;      /* 128px */


  /* ── BORDER RADIUS ─────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;


  /* ── SHADOWS ───────────────────────────────────────────── */
  /* Dark-mode shadows use black with low opacity */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.6);
  /* Accent glow — use sparingly on interactive elements */
  --shadow-accent: 0 0 24px rgba(77, 255, 192, 0.15);


  /* ── TRANSITIONS ───────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.33, 1, 0.68, 1); /* smooth ease-out */
  --ease-expo:   cubic-bezier(0.33, 1, 0.68, 1); /* smooth ease-out */
  --ease-soft:   cubic-bezier(0.33, 1, 0.68, 1); /* smooth ease-out */
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;


  /* ── LAYOUT ────────────────────────────────────────────── */
  --max-width:       1400px;
  --content-width:   720px;   /* Prose / case study body */
  --gutter:          var(--space-6);  /* Outer page padding */
}

/* ── TOUCH TARGET FLOOR ──────────────────────────────────
   Scoped to touch devices only — avoids inflating desktop
   click targets. Applied to nav/footer anchors, buttons,
   and a few known small controls. */
@media (hover: none) and (pointer: coarse) {
  .nav-logo,
  .nav-links a,
  .footer-right a,
  .nav-hamburger,
  .nav-float-trigger,
  .video-modal-close,
  .achievement-toggle,
  .footer-top-btn,
  .pagination-back,
  .audio-toggle,
  .breathe-link-small,
  .phase-skip,
  .hero-availability {
    min-height: 44px;
    min-width:  44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Anchors inside text flow shouldn't become block-level —
     keep them inline but still tall enough to tap (44 / 2 = 22
     px wrapper height + 14px padding each side = 50px). */
  .footer-email-value a,
  .footer-contact-value a {
    display: inline-block;
    padding: 14px 0;
  }
}