One soft surface, two signals, and a clear hierarchy.

/* Rodrigo Cazuza Website Design System v1.0
   Source: rodrigocazuza.com (css/neu-system.css + css/site-refinements.css), audited 11 Oct 2026.
   Light is the default theme; dark is opt-in via html.neu-dark (saved as localStorage "rc-theme"). */

:root {
  color-scheme: light;

  /* Surface + text */
  --neu-bg: #e6e7eb;            /* the one surface every element is cut from */
  --neu-bg-deep: #dcdee3;       /* media wells, image placeholders */
  --neu-text: #2b2d33;          /* headings, primary text (11.14:1) */
  --neu-text-2: #5d616b;        /* body, supporting text (5.02:1) */
  --neu-text-3: #7c808a;        /* metadata, handles, large text only (3.2:1) */
  --border: rgba(43, 45, 51, .08);

  /* Brand accents */
  --neu-violet: #6026ec;        /* Electric Violet: CTAs, links, focus, emphasis */
  --neu-violet-2: #7a45ff;      /* violet hover */
  --neu-green: #66d487;         /* Signal Green: fills, dots, rims, footer panel */
  --neu-green-text: #17663a;    /* Ink Green: green as text on the light surface */
  --neu-green-ink: #1d7a42;
  --logo-lime: #c1ff72;         /* wordmark file color on dark surfaces only */

  /* Depth: light source top-left. Raised = extruded, inset = pressed. */
  --neu-dark: rgba(158, 164, 178, .62);
  --neu-light: rgba(255, 255, 255, .95);
  --neu-raised-xs: 3px 3px 7px var(--neu-dark), -3px -3px 7px var(--neu-light);
  --neu-raised-sm: 5px 5px 12px var(--neu-dark), -5px -5px 12px var(--neu-light);
  --neu-raised: 9px 9px 22px var(--neu-dark), -9px -9px 22px var(--neu-light);
  --neu-raised-hover: 12px 12px 28px var(--neu-dark), -12px -12px 28px var(--neu-light);
  --neu-inset-sm: inset 3px 3px 7px var(--neu-dark), inset -3px -3px 7px var(--neu-light);
  --neu-inset: inset 5px 5px 11px var(--neu-dark), inset -5px -5px 11px var(--neu-light);
  --green-rim: 0 0 0 2px rgba(102, 212, 135, .75);
  --green-glow: 0 18px 38px -16px rgba(102, 212, 135, .7);

  /* Gradients */
  --gradient-primary: linear-gradient(145deg, #7340f5, #5520d6);
  --gradient-primary-hover: linear-gradient(145deg, #8455ff, #6026ec);
  --gradient-visit: linear-gradient(145deg, #7be29a, #55c477);
  --gradient-footer-panel: linear-gradient(150deg, #78de97 0%, #66d487 45%, #57c978 100%);

  /* Typography */
  --font-display: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-dot: "Array", "Arial Black", sans-serif;          /* hero "DESIGNER" only */
  --font-script: "Shrikhand", "Playfair Display", serif;   /* hero rotating role only */

  /* Spacing: 4px base */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px; --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --gutter: clamp(20px, 4vw, 48px);
  --section-y: clamp(56px, 6vw + 20px, 104px);
  --card-gap: clamp(16px, 2vw, 24px);
  --card-pad: clamp(20px, 2.4vw, 32px);
  --container-width: 1280px;

  /* Radius: 0.75 x the first neumorphic pass */
  --radius-xs: 6px;  --radius-sm: 10px; --radius-md: 15px;
  --radius-lg: 21px; --radius-xl: 27px; --radius-pill: 999px;

  /* Motion */
  --neu-ease: cubic-bezier(.22, .61, .36, 1);
  --ease-stack: cubic-bezier(.23, 1, .32, 1);
  --ease-wipe: cubic-bezier(.76, 0, .24, 1);
  --duration-fast: .25s;
  --duration-base: .35s;
  --duration-slow: .45s;
  --duration-emphasis: .5s;
}

:root[data-theme="dark"], html.neu-dark {
  color-scheme: dark;
  --neu-bg: #23252a;
  --neu-bg-deep: #1d1f23;
  --neu-text: #eceef2;
  --neu-text-2: #aeb2bc;
  --neu-text-3: #8d929c;
  --neu-violet: #a88cff;
  --neu-green-text: #6fdc91;
  --neu-dark: rgba(0, 0, 0, .55);
  --neu-light: rgba(255, 255, 255, .055);
  --border: rgba(255, 255, 255, .08);
}