/* ==========================================================================
   ARTLUST — shared tokens
   Rubik (from PlayAbly DS) + custom gallery palette: pink / yellow / black / blue
   ========================================================================== */

@font-face { font-family: 'Rubik'; src: url('fonts/Rubik-Light.woff2') format('woff2'), url('fonts/Rubik-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Rubik'; src: url('fonts/Rubik-Regular.woff2') format('woff2'), url('fonts/Rubik-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Rubik'; src: url('fonts/Rubik-Medium.woff2') format('woff2'), url('fonts/Rubik-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Rubik'; src: url('fonts/Rubik-SemiBold.woff2') format('woff2'), url('fonts/Rubik-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Rubik'; src: url('fonts/Rubik-Bold.woff2') format('woff2'), url('fonts/Rubik-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Rubik'; src: url('fonts/Rubik-Black.woff2') format('woff2'), url('fonts/Rubik-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Rubik'; src: url('fonts/Rubik-Italic.woff2') format('woff2'), url('fonts/Rubik-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Rubik'; src: url('fonts/Rubik-MediumItalic.woff2') format('woff2'), url('fonts/Rubik-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }

:root {
  /* Poster palette — high-contrast serif over a pink/yellow/black type-field
     with a chartreuse peel. Blue/grape/mint round out the Pentagram-style patchwork. */
  --al-pink:        #ff2d63;   /* cerise / poster pink */
  --al-pink-deep:   #d60f48;
  --al-yellow:      #ffc21f;   /* golden yellow */
  --al-yellow-deep: #e09e00;
  --al-lime:        #d2e64c;   /* chartreuse peel */
  --al-lime-deep:   #aabf2c;
  --al-blue:        #1f4dff;   /* electric ultramarine (patchwork) */
  --al-grape:       #7b5cff;   /* violet (patchwork) */
  --al-mint:        #bfe6d6;   /* soft mint (patchwork) */
  --al-black:       #0c0b0e;   /* near-black ink */
  --al-charcoal:    #161419;
  --al-bone:        #f4efe6;   /* warm off-white */
  --al-bone-deep:   #e8e1d4;
  --al-white:       #ffffff;

  /* GEIUK patchwork palette — the curated combos the brand loves.
     Used in (bg, partner) pairs across the grid + wordmark + dividers. */
  --g-orange:    #ff5e0e;
  --g-scarlet:   #ff3a14;
  --g-marigold:  #ffab1f;
  --g-yellow:    #ffe600;
  --g-lime:      #d6f53c;
  --g-cyan:      #16e6c3;
  --g-blue:      #1a2bff;
  --g-navy:      #0a1a6b;
  --g-violet:    #a020e8;
  --g-lavender:  #b9aef0;
  --g-pink:      #ff86c2;
  --g-aubergine: #7a0a52;
  --g-olive:     #8c7c0d;
  --g-brown:     #5c2a12;
  --g-mint:      #d2efc4;
  --g-peach:     #f9cba3;

  --font-serif: 'DM Serif Display', 'Times New Roman', Georgia, serif;
  --font-sans: 'Rubik', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }

/* --- interface guideline additions (2026-09-08) --- */
html { color-scheme: dark; }
a, button, [role="button"], input, label { touch-action: manipulation; }
h1, h2, h3, [id] { scroll-margin-top: 80px; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 14px; background: var(--al-yellow, #ffc21f); color: #0c0b0e; border-radius: 999px; font-family: var(--font-sans); font-size: 14px; text-decoration: none; transition: top .15s ease; }
.skip-link:focus { top: 12px; outline: 2px solid #fff; outline-offset: 2px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--al-yellow, #ffc21f); outline-offset: 3px; }