/* cycle™ — Color system
   The brand is strictly monochrome: ink black, paper white, and a precise
   gray ramp that mimics the glossy bevel + depth-of-field of the 3D work.
   No hues. Contrast and material (gloss, blur) carry the identity. */
:root {
  /* —— Base ink & paper —— */
  --black:        #000000;  /* true black — hero voids, type on light */
  --ink-900:      #0a0a0a;  /* near-black surfaces */
  --ink-800:      #141414;
  --ink-700:      #1f1f1f;
  --ink-600:      #2b2b2b;

  /* —— Gray ramp (cool-neutral, like brushed metal) —— */
  --gray-500:     #555555;
  --gray-400:     #777777;
  --gray-300:     #9a9a9a;
  --gray-200:     #c4c4c4;
  --gray-150:     #d9d9d9;
  --gray-100:     #ebebeb;
  --gray-50:      #f4f4f4;

  --paper:        #fafafa;  /* off-white page */
  --white:        #ffffff;  /* pure white — highlights, type on dark */

  /* —— Material accents (gloss specular, used sparingly) —— */
  --gloss-hi:     #ffffff;
  --gloss-lo:     rgba(255,255,255,0.04);

  /* —— Semantic: LIGHT surface (default page) —— */
  --bg:               var(--paper);
  --surface:          var(--white);
  --surface-sunk:     var(--gray-50);
  --surface-card:     var(--white);
  --text-strong:      var(--black);
  --text-body:        var(--ink-700);
  --text-muted:       var(--gray-400);
  --text-faint:       var(--gray-300);
  --border:           var(--gray-150);
  --border-strong:    var(--black);
  --hairline:         var(--gray-100);

  /* interactive on light */
  --action-bg:        var(--black);
  --action-fg:        var(--white);
  --action-bg-hover:  var(--ink-700);

  /* —— focus —— */
  --focus-ring:       var(--black);
}

/* —— Semantic: DARK surface (hero, inverted sections) —— */
.cy-dark, [data-theme="dark"] {
  --bg:               var(--black);
  --surface:          var(--ink-900);
  --surface-sunk:     var(--black);
  --surface-card:     var(--ink-800);
  --text-strong:      var(--white);
  --text-body:        var(--gray-200);
  --text-muted:       var(--gray-400);
  --text-faint:       var(--gray-500);
  --border:           var(--ink-600);
  --border-strong:    var(--white);
  --hairline:         rgba(255,255,255,0.08);

  --action-bg:        var(--white);
  --action-fg:        var(--black);
  --action-bg-hover:  var(--gray-200);

  --focus-ring:       var(--white);
}