/*
  Breakpoints are NOT custom properties on purpose — @media conditions can't
  read CSS custom properties. They're literal in layout.css: 1024px, 640px.

  Palette + type roles are named after the studio's own materials:
  chalk/ink (the room), deeppink/darkorchid/darkturquoise — the logo's
  actual paint-splash colors, used at full saturation.
*/
:root {
  /* Palette */
  --color-bg: #FAF6F0;
  --color-text: #181119;
  --color-text-secondary: #5A4E58;
  --color-text-muted: #6F646E;
  --color-brand: #F81090;
  --color-accent-pink: #9830C8;
  --color-accent-teal: #00C8D0;
  --color-panel-dark: #181119;
  --color-panel-dark-alt: #241923;
  --color-card-light: #F3EDE4;
  --color-offwhite: #FFFDF9;

  /* Darkorchid at full saturation drops to ~3.2:1 on the near-black panels
     (the old mustard accent-pink cleared 9:1) — this lightened tint keeps
     the same hue legible wherever accent-pink is read as small text on
     --color-panel-dark/-alt (footer headings, dark eyebrows, info-card
     labels), instead of dulling the token itself everywhere else it's used
     as a fill (dots, badges, marquee). */
  --color-accent-pink-on-dark: #CA86EA;

  /* Deeppink at full saturation is ~3-3.8:1 on --color-bg/--color-card-light
     — fine for the large hero/heading use of --color-brand, not enough for
     small text (eyebrows, links, badge labels) or for offwhite/cream text
     set on a solid brand-color fill (buttons, the brand CTA banner). This
     darkened same-hue shade covers both: as foreground text on light
     backgrounds, and — paired with --color-text as the fill's own
     foreground — anywhere brand is the background color instead. */
  --color-brand-ink: #A00D5E;

  /* Tints (badges, borders, decorative fills) */
  --color-brand-tint-12: rgba(248, 16, 144, 0.12);
  --color-accent-pink-tint-22: rgba(152, 48, 200, 0.22);
  --color-accent-teal-tint-30: rgba(0, 200, 208, 0.20);
  --color-panel-tint-08: rgba(24, 17, 25, 0.08);
  --color-border-subtle: rgba(24, 17, 25, 0.08);
  --color-border-pill: rgba(24, 17, 25, 0.20);
  --color-border-divider: rgba(24, 17, 25, 0.12);

  /* Gradients + translucent surfaces. These combine the existing studio
     colors instead of introducing a second visual language. */
  --gradient-brand: linear-gradient(135deg, #F81090 0%, #C93DBB 48%, #C96AE4 100%);
  --gradient-brand-motion: linear-gradient(115deg, #F81090 0%, #9830C8 58%, #00C8D0 130%);
  --gradient-cta: linear-gradient(115deg, #69B6F5 0%, #BB86E8 50%, #F67BB8 100%);
  --gradient-teal: linear-gradient(135deg, #00C8D0 0%, #68DDD5 58%, #F3EDE4 140%);
  --gradient-dark: linear-gradient(145deg, #181119 0%, #2D1A2D 54%, #172C30 120%);
  --gradient-paper: linear-gradient(145deg, rgba(255, 253, 249, 0.88), rgba(243, 237, 228, 0.68));
  --gradient-ambient: radial-gradient(circle at 10% 8%, rgba(248, 16, 144, 0.08), transparent 30%),
                      radial-gradient(circle at 92% 30%, rgba(0, 200, 208, 0.07), transparent 28%),
                      radial-gradient(circle at 55% 88%, rgba(152, 48, 200, 0.05), transparent 32%);
  --surface-glass: rgba(255, 253, 249, 0.68);
  --surface-glass-strong: rgba(250, 246, 240, 0.84);
  --surface-dark-glass: rgba(24, 17, 25, 0.86);
  --border-glass: rgba(255, 253, 249, 0.5);
  --shadow-glass: 0 18px 50px rgba(24, 17, 25, 0.10);
  --shadow-card: 0 10px 30px rgba(24, 17, 25, 0.08);

  /* Type — three deliberate roles, not one face doing everything */
  --font-display: "Archivo", "Helvetica Neue", sans-serif;
  --font-body: "Fraunces", Georgia, serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;
  --font-stretch-display: 125%;

  /* Radii */
  --radius-pill: 999px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-xl: 28px;

  /* Hand-drawn wavy stroke, reused as a mask (so any background-color can
     fill it) for the active nav link and the link-underline component —
     stretched to fill each link's own width edge-to-edge, so short and
     long links both get a clean, uncut wave rather than a partial tile. */
  --stroke-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M2 7 Q18 2 32 7 T62 6 T92 8 T118 5' stroke='black' stroke-width='4.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");

  /* Layout */
  --container-max: 1440px;
  --container-pad: 64px;
  --container-pad-tablet: 34px;
  --container-pad-mobile: 18px;
  --z-nav: 50;
}