/* ==========================================================================
   Triad Design Tokens
   Single source of truth for color, typography, spacing, radius, motion.
   Dark is the default theme; light overrides live in [data-theme="light"].
   Base values sampled from Homepage.png (1440px master).
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Color · Surfaces ------------------------------------------------ */
  --color-bg:              #0a090b;   /* page background */
  --color-surface:         #1c1c1e;   /* cards */
  --color-surface-hover:   #232326;
  --color-border:          #2d2b32;   /* tile outlines */
  --color-border-strong:   #45434d;
  --color-hairline:        rgba(255, 255, 255, 0.10);
  --color-nav-glass:       rgba(12, 11, 13, 0.72);
  --color-nav-glass-solid: rgba(12, 11, 13, 0.86);
  --color-nav-border:      rgba(255, 255, 255, 0.06);
  --color-menu-bg:         #141317;   /* dropdowns — opaque for legibility */
  --color-tile-hover:      rgba(255, 255, 255, 0.03);

  /* ---- Color · Text ---------------------------------------------------- */
  --color-text-primary:    #ffffff;
  --color-text-secondary:  #adacb0;   /* body copy */
  --color-text-tertiary:   #86858b;   /* ledes, legal */

  /* ---- Color · Accent -------------------------------------------------- */
  --color-accent:          #6c92e4;   /* eyebrows, links */
  --color-accent-bright:   #82a4f0;

  /* ---- Color · Inverse (contrast controls, e.g. nav CTA) ---------------- */
  --color-fill-inverse:    #ffffff;
  --color-fill-inverse-hover: #e8e8ed;
  --color-text-inverse:    #0a090b;

  /* ---- Elevation --------------------------------------------------------*/
  --shadow-nav:   0 8px 32px rgba(0, 0, 0, 0.45);
  /* drop-shadow follows the image alpha (its baked rounded corners), not the
     element box — transparent in dark so the theme switch cross-fades */
  --shadow-media: drop-shadow(0 22px 40px rgba(0, 0, 0, 0));

  /* ---- Typography ------------------------------------------------------ */
  --font-stack: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --text-hero:      clamp(2.75rem, 1rem + 6.1vw, 6rem);        /* 44 → 96 */
  --text-display:   clamp(2.5rem, 1rem + 5.4vw, 5.5rem);       /* 40 → 88 */
  --text-title:     clamp(2rem, 1.25rem + 2.3vw, 3rem);        /* 32 → 48 */
  --text-headline:  clamp(1.75rem, 1.25rem + 1.9vw, 2.75rem);  /* 28 → 44 */
  --text-card-title: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);     /* 24 → 32 */
  --text-lede:      clamp(1.1875rem, 0.95rem + 0.9vw, 1.75rem); /* 19 → 28 */
  --text-sub:       clamp(1.125rem, 1rem + 0.35vw, 1.3125rem); /* 18 → 21 */
  --text-body:      1.0625rem;                                 /* 17 */
  --text-eyebrow:   1.0625rem;                                 /* 17 */
  --text-label:     clamp(1.125rem, 1rem + 0.45vw, 1.5rem);    /* 18 → 24 */
  --text-caption:   0.875rem;                                  /* 14 */

  --leading-hero:     1.06;
  --leading-heading:  1.14;
  --leading-body:     1.47;
  --tracking-hero:    -0.015em;
  --tracking-heading: -0.01em;

  /* ---- Layout ----------------------------------------------------------- */
  --container-max:   70.625rem;                 /* 1130px — copy container   */
  --container-wide:  83.25rem;                  /* 1332px — media container  */
  --container-nav:   85rem;                     /* 1360px — nav / hairlines  */
  --gutter:          clamp(1.25rem, 3.75vw, 3.375rem);   /* 20 → 54px       */
  --section-pad:     clamp(4.5rem, 3rem + 6.5vw, 8.25rem); /* 72 → 132px    */

  /* ---- Radius ----------------------------------------------------------- */
  --radius-media:  10px;    /* screenshot frames  */
  --radius-card:   40px;    /* step cards         */
  --radius-tile:   34px;    /* source tiles       */
  --radius-badge:  12px;    /* store badges       */
  --radius-pill:   999px;   /* nav bar, buttons   */

  /* ---- Motion ----------------------------------------------------------- */
  --ease-gentle:   cubic-bezier(0.28, 0.11, 0.32, 1);  /* Apple reveal ease */
  --ease-spring:   cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast:   300ms;
  --duration-medium: 600ms;
  --duration-reveal: 900ms;
  --duration-theme:  500ms;
  --stagger-step:    80ms;
}

/* ==========================================================================
   Light theme
   Toggled via data-theme on <html>; dark remains the default.
   ========================================================================== */

:root[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --color-bg:              #ffffff;
  --color-surface:         #f5f5f7;
  --color-surface-hover:   #ececf0;
  --color-border:          #d6d6dc;
  --color-border-strong:   #b9b9c1;
  --color-hairline:        rgba(0, 0, 0, 0.12);
  --color-nav-glass:       rgba(255, 255, 255, 0.72);
  --color-nav-glass-solid: rgba(255, 255, 255, 0.86);
  --color-nav-border:      rgba(0, 0, 0, 0.08);
  --color-menu-bg:         #fdfdfe;
  --color-tile-hover:      rgba(0, 0, 0, 0.03);

  /* Text */
  --color-text-primary:    #1d1d1f;
  --color-text-secondary:  #515154;
  --color-text-tertiary:   #6e6e73;

  /* Accent — darkened for contrast on white */
  --color-accent:          #3d63cf;
  --color-accent-bright:   #2f55bd;

  /* Inverse controls: dark pill on light nav */
  --color-fill-inverse:    #1d1d1f;
  --color-fill-inverse-hover: #333336;
  --color-text-inverse:    #ffffff;

  /* Elevation */
  --shadow-nav:   0 8px 32px rgba(0, 0, 0, 0.10);
  --shadow-media: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.16));
}