/* ==========================================================================
   RiyalMarketing — Design Tokens
   Original token system. Inspired only by editorial/enterprise SaaS
   sensibility — no colors, type, or component values copied from any
   reference system.
   ========================================================================== */

:root {

  /* ---- Color: Surfaces ---- */
  --color-canvas:        #F7F7F4;   /* page background — warm neutral paper, not cream */
  --color-surface:       #FFFFFF;   /* card / panel surface */
  --color-surface-sunken:#F0F0EC;   /* recessed panels, code blocks, inputs */
  --color-onyx:          #0B0D0A;   /* darkest surface — footer, inverted sections */
  --color-onyx-raised:   #14170F;   /* raised panel on dark surface */

  /* ---- Color: Ink (text) ---- */
  --color-ink:           #12130F;   /* primary heading / body text */
  --color-carbon:        #34362F;   /* secondary text on light */
  --color-slate:         #666A5E;   /* muted body copy, captions */
  --color-slate-soft:    #8B8E80;   /* tertiary / disabled text */
  --color-fog:           #AEB1A3;   /* placeholder text, faint icons */
  --color-ink-inverse:   #F4F5EF;   /* primary text on dark surfaces */
  --color-carbon-inverse:#B9BCAE;   /* secondary text on dark surfaces */

  /* ---- Color: Borders / Dividers ---- */
  --color-border:        #E2E2DB;   /* default hairline border */
  --color-border-strong: #D2D2C8;   /* card / input border */
  --color-border-inverse:#2A2D22;   /* hairline border on dark surfaces */

  /* ---- Color: Accent — "Growth Green" (single chromatic voice) ---- */
  --color-accent-core:   #1E6E46;   /* primary CTA fill, links, active states */
  --color-accent-bright: #2A9C63;   /* hover state, decorative strokes */
  --color-accent-line:   #4FCE8C;   /* growth-line motif, positive data marks only */
  --color-accent-wash:   #E8F1EB;   /* soft tinted background / highlight band */
  --color-accent-wash-2: #DDEDE3;   /* slightly deeper wash for borders on wash bg */

  /* ---- Typography: Families ---- */
  --font-display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---- Typography: Scale ---- */
  --text-mono-label:   12px;  /* eyebrows, tags, data labels */
  --text-caption:      13px;
  --text-body:         16px;
  --text-body-lg:      18px;
  --text-subheading:   22px;
  --text-heading-sm:   30px;
  --text-heading:      40px;
  --text-heading-lg:   56px;
  --text-display:      72px;

  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.45;
  --leading-relaxed: 1.6;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:   0.08em;   /* mono eyebrows, uppercase labels */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     600; /* display serif reads heavy enough at 600 — reserved 700 unused to keep restraint */

  /* ---- Spacing (4px base unit) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 120px;
  --space-14: 160px;

  /* ---- Layout ---- */
  --page-max-width: 1280px;
  --content-max-width: 720px;
  --gutter: 24px;
  --section-gap: 120px;
  --section-gap-sm: 80px;

  /* ---- Radius (sharper / architectural — never bouncy) ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* ---- Shadows (restrained, near-neutral, cool-toned) ---- */
  --shadow-xs: 0 1px 2px rgba(18, 19, 15, 0.05);
  --shadow-sm: 0 2px 8px rgba(18, 19, 15, 0.06), 0 1px 2px rgba(18, 19, 15, 0.04);
  --shadow-md: 0 8px 24px rgba(18, 19, 15, 0.08);
  --shadow-lg: 0 16px 48px rgba(18, 19, 15, 0.10);
  --shadow-focus: 0 0 0 3px rgba(30, 110, 70, 0.28);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 320ms;
  --duration-slow: 600ms;

  /* ---- Z-index ---- */
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}