/* =====================================================================
   MATTEO MARTIN — design tokens + colour themes (shared by every page)
   Themes: default ELECTRIC, [data-theme="gold"], [data-theme="ice"]
   ===================================================================== */
@property --acc-1 { syntax: '<color>'; inherits: true; initial-value: #792AFF; }
@property --acc-2 { syntax: '<color>'; inherits: true; initial-value: #566DFF; }
@property --acc-3 { syntax: '<color>'; inherits: true; initial-value: #FF6BD6; }
@property --sheen { syntax: '<length>'; inherits: true; initial-value: -300vw; }

:root {
  --violet: #792AFF;
  --blue:   #566DFF;
  --pink:   #FF6BD6;
  --ink:    #171020;
  --white:  #FFFFFF;

  --ink-2: #211830;
  --line: rgba(255, 255, 255, .16);
  --line-soft: rgba(255, 255, 255, .045);
  --muted: rgba(255, 255, 255, .68);

  /* Accent slots — rotated by the "Remix" interaction */

  --f-display: "Syne", "Archivo Black", "Arial Black", system-ui, sans-serif;
  --f-sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --gutter: clamp(16px, 3.2vw, 56px);
  --title-size: clamp(3.2rem, 14vw, 17rem);   /* refined by JS (fitTitle) */

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);

  color-scheme: dark;
  transition: --acc-1 .9s var(--ease-out), --acc-2 .9s var(--ease-out), --acc-3 .9s var(--ease-out);
}
:root {
  /* Theme slots (ELECTRIC = default). --violet / --blue / --pink are the
     three accent slots; the other themes below re-map them. */
  --acc-1: var(--violet); --acc-2: var(--blue); --acc-3: var(--pink);
  --chrome:     linear-gradient(180deg, #FFFFFF 0%, #FBF8FF 40%, #E2D4FF 49%, #A98BFF 52%, #C9B8FF 68%, #F4EFFF 88%, #FFFFFF 100%);
  --chrome-hot: linear-gradient(180deg, #FFFFFF 0%, #FFF6FD 40%, #FFD3F3 49%, #FF6BD6 52%, #A46BFF 70%, #7C8CFF 88%, #D9DFFF 100%);
  --ex-1: #566DFF; --ex-2: #3F3BC4; --ex-3: #2B2380; --ex-4: #1C1438;
  --logo-hi: #C6A2FF; --logo-mid: #792AFF; --logo-lo: #566DFF;
  --depth-near: #485CF0; --depth-far: #1A1030;
  --ball-2: #FFD9F4; --ball-3: #FF6BD6; --ball-4: #792AFF; --ball-5: #2A1650;
  --grain-o: .09; --dirt-o: 0;
  --mini-filter: none;
}
:root[data-theme="gold"] {
  --violet: #C9A227; --blue: #6B4F12; --pink: #FFE08A; --ink: #0B0905; --white: #F7EFDD;
  --line: rgba(247, 239, 221, .16); --line-soft: rgba(247, 239, 221, .05); --muted: rgba(247, 239, 221, .64);
  --chrome:     linear-gradient(180deg, #FFFDF6 0%, #FBF3DD 40%, #EBD9A8 49%, #B8892B 52%, #D9BF7A 68%, #F6EBCB 88%, #FFFDF6 100%);
  --chrome-hot: linear-gradient(180deg, #FFFFFF 0%, #FFF7DA 40%, #FFE7A0 49%, #E0B23A 52%, #A9781C 70%, #6B4F12 88%, #E6D3A1 100%);
  --ex-1: #A9781C; --ex-2: #7A5512; --ex-3: #45300A; --ex-4: #191106;
  --logo-hi: #FFE9A8; --logo-mid: #C9A227; --logo-lo: #6B4F12;
  --depth-near: #8E6A1A; --depth-far: #120D05;
  --ball-2: #FFF3C4; --ball-3: #FFE08A; --ball-4: #C9A227; --ball-5: #2A1E06;
  --grain-o: .03;
  --mini-filter: sepia(1) saturate(2.6) hue-rotate(-8deg) brightness(1.05);
}
:root[data-theme="ice"] {
  --violet: #5EC8F2; --blue: #1F4E8C; --pink: #E6FBFF; --ink: #050B12; --white: #F2FBFF;
  --line: rgba(242, 251, 255, .17); --line-soft: rgba(242, 251, 255, .05); --muted: rgba(242, 251, 255, .66);
  --chrome:     linear-gradient(180deg, #FFFFFF 0%, #F4FCFF 40%, #D2F0FF 49%, #6FB7E0 52%, #B6DDF2 68%, #F0FAFF 88%, #FFFFFF 100%);
  --chrome-hot: linear-gradient(180deg, #FFFFFF 0%, #F2FEFF 40%, #C9F4FF 49%, #5EC8F2 52%, #2C7DC0 70%, #1F4E8C 88%, #D9EEFF 100%);
  --ex-1: #4AA8D8; --ex-2: #2C6FA8; --ex-3: #173F6B; --ex-4: #08162A;
  --logo-hi: #E6FBFF; --logo-mid: #5EC8F2; --logo-lo: #1F4E8C;
  --depth-near: #2E7FB8; --depth-far: #06101C;
  --ball-2: #F2FEFF; --ball-3: #9BE3FF; --ball-4: #2C7DC0; --ball-5: #06162A;
  --grain-o: .045;
  --mini-filter: hue-rotate(-70deg) saturate(.9) brightness(1.2);
}
/* Remix rotates the three accent slots of the current theme */
:root[data-palette="1"] { --acc-1: var(--blue); --acc-2: var(--pink); --acc-3: var(--violet); }
:root[data-palette="2"] { --acc-1: var(--pink); --acc-2: var(--violet); --acc-3: var(--blue); }