/* ================================================
   HabitApex — Apple-Inspired Design Tokens v2
   ================================================ */
:root {
  /* ── Apple Font Stack ─────────────────────── */
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                 "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont,
                  "Inter", "Helvetica Neue", sans-serif;

  /* ── Type Scale (Apple exact) ─────────────── */
  --text-11: 0.6875rem;   /* 11px */
  --text-12: 0.75rem;     /* 12px — nav links */
  --text-14: 0.875rem;    /* 14px — small body */
  --text-17: 1.0625rem;   /* 17px — body */
  --text-19: 1.1875rem;   /* 19px — lead body */
  --text-21: 1.3125rem;   /* 21px — large body */
  --text-24: 1.5rem;      /* 24px — card heading */
  --text-28: 1.75rem;     /* 28px — sub section */
  --text-32: 2rem;        /* 32px — h3 */
  --text-40: 2.5rem;      /* 40px — h2 */
  --text-48: 3rem;        /* 48px — h2 large */
  --text-56: 3.5rem;      /* 56px — h1 */
  --text-64: 4rem;        /* 64px — hero */
  --text-80: 5rem;        /* 80px — hero XL */
  --text-96: 6rem;        /* 96px — statement */

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

  /* ── Letter Spacing (Apple tight tracking) ── */
  --tracking-hero:    -0.025em;
  --tracking-heading: -0.015em;
  --tracking-subhead: -0.008em;
  --tracking-body:     0em;
  --tracking-caps:     0.08em;

  /* ── Line Heights ─────────────────────────── */
  --leading-hero:   1.05;
  --leading-heading:1.1;
  --leading-snug:   1.2;
  --leading-normal: 1.42857;  /* Apple's exact body line-height */
  --leading-relaxed:1.6;

  /* ── Color System ─────────────────────────── */

  /* Apple canvas colors */
  --color-black:    #000000;
  --color-dark:     #0a0a0a;
  --color-card-dark:#161617;
  --color-white:    #ffffff;
  --color-light:    #f5f5f7;  /* Apple's signature off-white */
  --color-light-2:  #e8e8ed;

  /* Text */
  --color-text-dark:   #1d1d1f;  /* Apple dark text */
  --color-text-light:  #f5f5f7;  /* Apple light text */
  --color-text-muted:  #6e6e73;  /* Apple muted — #86868b also used */
  --color-text-muted2: #86868b;
  --color-text-white:  #ffffff;

  /* HabitApex brand accent — used Apple-style */
  --color-brand:       #2563EB;
  --color-brand-light: #3B82F6;
  --color-brand-hover: #1D4ED8;
  --color-brand-glow:  rgba(37, 99, 235, 0.25);
  --color-cyan:        #06B6D4;
  --color-gold:        #F59E0B;
  --color-success:     #30D158;  /* Apple green */

  /* Apple link blue */
  --color-link-dark:  #0066cc;
  --color-link-light: #2997ff;

  /* ── Semantic Surface Colors ─────────────── */
  --surface-hero:       var(--color-black);
  --surface-statement:  var(--color-light);
  --surface-bento:      var(--color-black);
  --surface-showcase:   var(--color-white);
  --surface-stats:      var(--color-light);
  --surface-progression:var(--color-black);
  --surface-trust:      var(--color-white);
  --surface-cta:        var(--color-black);
  --surface-footer:     #111111;

  /* ── Gradients ────────────────────────────── */
  --gradient-brand:   linear-gradient(135deg, #2563EB 0%, #06B6D4 100%);
  --gradient-brand-text: linear-gradient(135deg, #60A5FA 0%, #22D3EE 100%);
  --gradient-dark-hero: radial-gradient(ellipse at 50% 0%, #0d1a3a 0%, #000000 60%);
  --gradient-gold:    linear-gradient(135deg, #F59E0B, #FBBF24);

  /* ── Borders ──────────────────────────────── */
  --border-dark:   rgba(255, 255, 255, 0.1);  /* Apple card border dark */
  --border-light:  rgba(0, 0, 0, 0.08);       /* Apple card border light */
  --border-brand:  rgba(37, 99, 235, 0.3);

  /* ── Shadows (Apple layered) ─────────────── */
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:   0 8px 24px rgba(0,0,0,0.12);
  --shadow-card: 0 20px 40px rgba(0,0,0,0.08);   /* Apple light card shadow */
  --shadow-card-dark: 0 20px 60px rgba(0,0,0,0.5);
  --shadow-brand: 0 8px 32px rgba(37,99,235,0.3);
  --shadow-glow:  0 0 60px rgba(37,99,235,0.2);

  /* ── Glass (Nav backdrop) ─────────────────── */
  --glass-dark-bg:  rgba(0, 0, 0, 0.8);
  --glass-light-bg: rgba(255, 255, 255, 0.8);
  --glass-blur: saturate(180%) blur(20px);

  /* ── Radii (Apple standard) ──────────────── */
  --radius-sm:   6px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  28px;    /* Apple card radius */
  --radius-2xl: 32px;    /* Apple feature card */
  --radius-pill: 980px;  /* Apple button pill */

  /* ── Spacing ──────────────────────────────── */
  --space-2:   0.125rem;
  --space-4:   0.25rem;
  --space-8:   0.5rem;
  --space-12:  0.75rem;
  --space-16:  1rem;
  --space-20:  1.25rem;
  --space-24:  1.5rem;
  --space-32:  2rem;
  --space-40:  2.5rem;
  --space-48:  3rem;
  --space-56:  3.5rem;
  --space-64:  4rem;
  --space-80:  5rem;
  --space-96:  6rem;
  --space-120: 7.5rem;
  --space-160: 10rem;

  /* ── Layout ───────────────────────────────── */
  --max-w:        980px;
  --max-w-wide:  1200px;
  --max-w-full:  1440px;
  --nav-h:         44px;
  --section-py: clamp(5rem, 9vw, 9rem);

  /* ── Transitions ──────────────────────────── */
  --ease-out:   cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-apple: cubic-bezier(0.42, 0, 0.58, 1);
  --dur-fast:  150ms;
  --dur-base:  300ms;
  --dur-slow:  600ms;
}