/* ==========================================================================
   DESIGN TOKENS
   The whole visual system lives here. Change a value, it changes everywhere.
   Restraint is the brief: Apple's discipline, construction-industry sobriety.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Colour -----------------------------------------------------------
     Navy is the brand, taken straight from the logo. Orange is the logo's
     accent and appears on roughly 1% of the page. It is never a full-size
     button. Everything else is ink and greys.                             */

  --ink:            #0a0a0b;   /* headlines, dark sections */
  --ink-soft:       #1d1d1f;   /* Apple's own near-black */
  --body:           #3f4147;   /* body copy */
  --muted:          #6e7076;   /* captions, labels, meta */
  --faint:          #9a9ca3;   /* placeholders, disabled */

  --navy:           #011c3c;   /* PRIMARY — buttons, links, the logo itself */
  --navy-deep:      #00122a;   /* hover / pressed */
  --navy-tint:      #eaeef4;   /* tinted panels */

  /* Orange comes in two values and they are NOT interchangeable.

     --accent is the logo colour, sampled from the mark. On white it
     measures 2.80:1, below the 4.5:1 floor, so it is allowed only on the
     logo itself and on navy or ink surfaces, where it reaches 6.07:1.

     --accent-deep is the same hue 0.3 degrees apart, darkened until it
     passes on light backgrounds: 5.01:1 on white, 4.60:1 on the section
     grey. Every accent on a light surface uses this one.

     Neither is ever a button fill. White on orange is 2.80:1 and fails at
     every size.                                                           */

  --accent:         #ff6e0d;   /* the logo's orange. Dark surfaces only. */
  --accent-deep:    #b85009;   /* the working accent on light surfaces */
  --accent-soft:    #fff3ea;   /* pale tint; carries --accent-deep text at 4.6:1 */

  --surface:        #ffffff;
  --surface-mist:   #f5f5f7;   /* Apple's section grey */
  --surface-sand:   #faf9f7;   /* warmer alternate */

  --line:           #e5e5e7;   /* 1px hairline */
  --line-strong:    #d2d3d6;
  --line-invert:    rgba(255, 255, 255, 0.16);

  --on-dark:        #ffffff;
  --on-dark-soft:   rgba(255, 255, 255, 0.72);
  --on-dark-faint:  rgba(255, 255, 255, 0.52);

  --focus:          #2b6cb0;

  /* ---- Type -------------------------------------------------------------
     System stack: real SF Pro on Apple hardware, Segoe on Windows.
     Zero network requests, zero layout shift, and it is genuinely the
     typeface the reference design uses.                                    */

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  /* Fluid scale. Tight tracking on large sizes is the single biggest
     "premium" tell — cheap sites leave display type at default tracking. */
  --fs-display:  clamp(2.25rem, 1.3rem + 4.1vw, 3.625rem);
  --fs-h1:       clamp(2.125rem, 1.25rem + 3.6vw, 3.375rem);
  --fs-h2:       clamp(1.625rem, 1.1rem + 2.1vw, 2.375rem);
  --fs-h3:       clamp(1.25rem, 1.08rem + 0.7vw, 1.5rem);
  --fs-h4:       1.125rem;
  --fs-lead:     clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  --fs-body:     1.0625rem;
  --fs-sm:       0.9375rem;
  --fs-xs:       0.8125rem;
  --fs-eyebrow:  0.75rem;

  --lh-display: 1.05;
  --lh-head:    1.14;
  --lh-lead:    1.5;
  --lh-body:    1.62;

  --ls-display: -0.032em;
  --ls-head:    -0.024em;
  --ls-lead:    -0.013em;
  --ls-body:    -0.006em;
  --ls-eyebrow: 0.09em;

  --fw-reg:  400;
  --fw-med:  500;
  --fw-semi: 600;

  /* ---- Space ------------------------------------------------------------ */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 2.5rem;   --s8: 3rem;
  --s9: 4rem;     --s10: 5rem;    --s11: 6.5rem;  --s12: 8rem;

  --section-y: clamp(2.75rem, 1.6rem + 3.2vw, 4.5rem);
  --gutter:    clamp(1rem, 0.5rem + 2vw, 2rem);
  --measure:   68ch;   /* max line length for readable body copy */

  /* ---- Shape ------------------------------------------------------------ */
  --r-sm:  6px;
  --r:     10px;
  --r-lg:  14px;
  --r-pill: 999px;

  /* Shadows stay almost invisible. A heavy drop shadow is the fastest way
     to look like a 2015 template.                                          */
  --shadow-sm: 0 1px 2px rgba(10, 10, 11, 0.05);
  --shadow:    0 2px 8px rgba(10, 10, 11, 0.06), 0 1px 2px rgba(10, 10, 11, 0.04);
  --shadow-lg: 0 18px 48px rgba(10, 10, 11, 0.13), 0 2px 8px rgba(10, 10, 11, 0.06);

  /* ---- Motion ------------------------------------------------------------
     Short, eased, and never bouncy. Motion should be felt, not watched.    */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:    140ms;
  --t:         240ms;
  --t-slow:    560ms;

  --header-h: 68px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}