/* ==========================================================================
   RISHI OIL — DESIGN TOKENS
   Single source of truth for color, type, spacing & motion.
   Derived from the brand logo & visiting card (navy flame / amber drop).
   Edit values here to re-theme the entire site.
   ========================================================================== */

:root {
  /* ---- Brand color core ---- */
  --color-navy-900:      #0d1e33;   /* deep night — headings, header bg   */
  --color-navy-800:      #14293f;   /* panels, footer                    */
  --color-navy-700:      #1c3a56;   /* borders / secondary surfaces      */
  --color-amber-500:     #f0961e;   /* flame amber — primary accent      */
  --color-amber-600:     #d97e12;   /* hover / pressed state             */
  --color-copper-500:    #c96a1e;   /* burnt copper — gradients, links   */
  --color-amber-100:     #fdecd2;   /* tint for badges / soft bg         */

  /* ---- Neutrals ---- */
  --color-paper:          #f7f8fa;  /* page background                  */
  --color-white:          #ffffff;
  --color-ink-900:        #14202e;  /* body copy on light bg            */
  --color-ink-600:        #4c5a6b;  /* secondary copy                   */
  --color-ink-300:        #b7c0cb;  /* dividers, disabled                */
  --color-line:           #e3e7ec;  /* hairline borders                  */

  /* ---- Semantic aliases ---- */
  --color-bg:             var(--color-paper);
  --color-surface:        var(--color-white);
  --color-brand:          var(--color-navy-900);
  --color-accent:         var(--color-amber-500);
  --color-accent-strong:  var(--color-copper-500);
  --color-text:           var(--color-ink-900);
  --color-text-muted:     var(--color-ink-600);

  /* ---- Gradients (signature flame/drop motif) ---- */
  --gradient-flame: linear-gradient(135deg, var(--color-amber-500) 0%, var(--color-copper-500) 60%, #a8500f 100%);
  --gradient-navy:  linear-gradient(160deg, var(--color-navy-900) 0%, #0a1626 100%);

  /* ---- Typography ---- */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  --fs-h1: clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(13, 30, 51, 0.06), 0 1px 3px rgba(13, 30, 51, 0.08);
  --shadow-md: 0 8px 24px rgba(13, 30, 51, 0.10);
  --shadow-lg: 0 20px 48px rgba(13, 30, 51, 0.16);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-med: 320ms;
  --dur-slow: 620ms;

  /* ---- Z-index scale ---- */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-med: 0ms;
    --dur-slow: 0ms;
  }
}