/* ==========================================================================
   theme.css — Board-specific visual layer for rico-rojas.com
   --------------------------------------------------------------------------
   This file is the ONLY place board-specific visual decisions live: palette,
   font stacks, radii, shadows, background field, and semantic aliases.
   styles.css consumes these custom properties and never hard-codes a color,
   font family, or radius. Swap this one file to retheme the entire site with
   a different brand board (e.g. Carbon Signal or Indigo Mint) without touching
   structural CSS.

   Active board: Graphite + Electric Blue (Direction 01).
   Source: brand/brand-board-graphite-blue.html
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Raw palette (graphite field, warm paper, electric blue signal) ----- */
  --graphite-950: oklch(16% 0.008 255);
  --graphite-900: oklch(20% 0.009 255);
  --graphite-850: oklch(23% 0.01 255);
  --graphite-800: oklch(27% 0.011 255);
  --graphite-700: oklch(36% 0.012 255);
  --paper-100: oklch(96% 0.012 82);
  --paper-200: oklch(91% 0.014 82);
  --paper-300: oklch(82% 0.014 82);
  --blue-500: oklch(62% 0.24 255);
  --blue-400: oklch(72% 0.2 250);
  --blue-300: oklch(81% 0.14 246);
  --blue-700: oklch(48% 0.22 260);
  --success: oklch(73% 0.15 155);
  --warning: oklch(82% 0.14 82);
  --danger: oklch(69% 0.2 25);

  /* --- Semantic surface + text aliases (what structural CSS references) ---- */
  --surface: var(--graphite-900);
  --surface-raised: var(--graphite-850);
  --surface-strong: var(--graphite-950);
  --surface-invert: var(--paper-100);
  --text: var(--paper-100);
  --text-muted: var(--paper-300);
  --text-invert: var(--graphite-950);
  --text-invert-muted: var(--graphite-700);
  --line: var(--graphite-700);
  --line-invert: var(--paper-300);

  /* --- Signal roles ------------------------------------------------------- */
  --accent: var(--blue-500);
  --accent-bright: var(--blue-400);
  --accent-deep: var(--blue-700);
  --focus: var(--blue-300);
  --on-accent: var(--graphite-950);
  --cta-background: var(--accent-deep);
  --cta-foreground: var(--paper-100);
  --cta-action-background: var(--paper-100);
  --cta-action-background-hover: var(--paper-200);
  --cta-action-foreground: var(--text-invert);
  --state-verified: var(--success);
  --state-boundary: var(--danger);
  --state-note: var(--warning);

  /* --- Type stacks (system / local resident only, no CDN) ----------------- */
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* --- Shape + depth ------------------------------------------------------ */
  --radius-sm: 0.3rem;
  --radius-md: 0.7rem;
  --radius-lg: 1.2rem;
  --radius-pill: 999px;
  --shadow: 0 1.25rem 3rem oklch(5% 0.01 255 / 0.28);
  --shadow-soft: 0 0.6rem 1.6rem oklch(5% 0.01 255 / 0.22);

  /* --- Background field (grid signal, decorative only) -------------------- */
  --field-grid: oklch(62% 0.24 255 / 0.045);
  --field-grid-size: 42px;
  --field-base: var(--graphite-950);

  /* --- Layout rhythm ------------------------------------------------------ */
  --page: min(1180px, calc(100% - 2rem));
  --page-narrow: min(760px, calc(100% - 2rem));
  --nav-height: 3.4rem;

  /* --- Selection --------------------------------------------------------- */
  --selection-bg: var(--accent);
  --selection-fg: var(--paper-100);

  /* --- Motion system (board-specific: colors, opacity, timing, easing) ----
     styles.css defines the structural animation RULES; it must not hard-code
     any of the values below. script.js drives the pointer behavior. Retheme
     the entire motion feel by editing only this block. Intensity target:
     below almaswebconsulting.com, above the static rTech pages. */

  /* Entrance stagger — noticeable on arrival, then quiet. */
  --enter-distance: 14px;          /* small upward travel, never large */
  --enter-duration: 620ms;
  --enter-ease: cubic-bezier(0.16, 0.84, 0.34, 1);
  --enter-step: 90ms;              /* delay between staggered children */
  --enter-base-delay: 60ms;        /* lead-in before the first child */

  /* Ambient electric-blue signal field (decorative, behind first section). */
  --signal-line: oklch(72% 0.2 250 / 0.24);      /* orbital line stroke */
  --signal-line-soft: oklch(72% 0.2 250 / 0.1);
  --signal-node: oklch(81% 0.14 246 / 0.55);     /* node dot */
  --signal-node-core: oklch(90% 0.1 246 / 0.9);
  --signal-tracer: oklch(85% 0.16 248 / 0.9);    /* scan tracer head */
  --signal-glow: oklch(62% 0.24 255 / 0.14);     /* soft radial wash */
  --signal-field-opacity: 0.9;     /* whole-field master opacity */
  --signal-orbit-duration: 46s;    /* slow orbital revolution */
  --signal-orbit-duration-2: 62s;  /* second orbit, differing period */
  --signal-tracer-duration: 9s;    /* scan/tracer sweep period */
  --signal-node-pulse: 5.5s;       /* gentle node breathing */
  --signal-node-delay-2: -1.6s;    /* offsets so nodes never pulse in unison */
  --signal-node-delay-3: -3.1s;
  --signal-node-delay-4: -4.4s;
  --signal-ease: cubic-bezier(0.45, 0, 0.55, 1);

  /* Pointer parallax — very small; text stays stable. */
  --parallax-field: 16px;          /* max field travel across viewport */
  --parallax-portrait: 8px;        /* max portrait travel (smaller still) */
  --parallax-ease: 420ms;          /* settle time when pointer stops */
  /* Live pointer offsets (set by script.js; default centered/neutral). */
  --px: 0;                         /* -1 .. 1 horizontal */
  --py: 0;                         /* -1 .. 1 vertical */
}

/* Board handle for print + light-context inversions.
   Structural CSS keys off these; only theme.css sets their values. */
@media print {
  :root {
    --field-base: var(--paper-100);
    --field-grid: transparent;
    --signal-field-opacity: 0;
  }
}