/* ============================================================
   rg-tokens.css — Rungeni Design Tokens
   The single source of truth for all visual decisions.
   Every other CSS file should reference these variables only.
   Host at: /assets/rg-tokens.css
   ============================================================

   HOW TO USE:
   - Override a token at :root to change it site-wide
   - Override on a selector to scope it to one component
   - Never hardcode hex values outside this file

   ADDING NEW TOKENS:
   - Add to the relevant section below
   - Use the naming convention: --rg-[category]-[property]-[variant]
   ============================================================ */

:root {

  /* ── BRAND COLORS ─────────────────────────────────────────
     The core palette. Add new brand colors here only.
  ────────────────────────────────────────────────────────── */
  --rg-color-fire:          #FF4B1F;
  --rg-color-fire-light:    #FF7A50;
  --rg-color-fire-dim:      #fff5f3;

  --rg-color-coal:          #1A1614;
  --rg-color-ash:           #2E2926;
  --rg-color-warm-dark:     #3D2E28;
  --rg-color-warm-mid:      #5C4A42;
  --rg-color-warm-muted:    #b0a09a;

  --rg-color-warm-light:    #F5EDE8;
  --rg-color-warm-white:    #FBF7F5;
  --rg-color-white:         #ffffff;

  --rg-color-gold:          #E8A840;
  --rg-color-gold-dim:      #fdf6e7;

  --rg-color-success:       #22c55e;
  --rg-color-success-dim:   #f0fdf4;
  --rg-color-warning:       #f59e0b;
  --rg-color-warning-dim:   #fffbeb;
  --rg-color-danger:        #ef4444;
  --rg-color-danger-dim:    #fef2f2;
  --rg-color-info:          #3b82f6;
  --rg-color-info-dim:      #eff6ff;

  /* ── SEMANTIC COLOR ALIASES ───────────────────────────────
     Use these in components, not raw brand colors.
     Makes retheming a one-line change.
  ────────────────────────────────────────────────────────── */
  --rg-color-primary:       var(--rg-color-fire);
  --rg-color-primary-hover: #e03d10;
  --rg-color-primary-dim:   var(--rg-color-fire-dim);

  --rg-color-text:          var(--rg-color-warm-dark);
  --rg-color-text-muted:    var(--rg-color-warm-mid);
  --rg-color-text-subtle:   var(--rg-color-warm-muted);
  --rg-color-text-inverse:  var(--rg-color-white);

  --rg-color-bg:            var(--rg-color-warm-white);
  --rg-color-bg-card:       var(--rg-color-white);
  --rg-color-bg-subtle:     var(--rg-color-warm-light);
  --rg-color-bg-dark:       var(--rg-color-coal);

  --rg-color-border:        rgba(92, 74, 66, 0.15);
  --rg-color-border-strong: rgba(92, 74, 66, 0.3);

  /* ── TYPOGRAPHY ───────────────────────────────────────────
     Font stacks, scale, weights, line heights.
  ────────────────────────────────────────────────────────── */
  --rg-font-body:      'DM Sans', system-ui, -apple-system, sans-serif;
  --rg-font-display:   'DM Serif Display', Georgia, serif;
  --rg-font-mono:      'ui-monospace', 'Cascadia Code', monospace;

  /* Type scale — use these, never raw px in components */
  --rg-text-xs:    0.7rem;    /* 11.2px  — labels, badges */
  --rg-text-sm:    0.8rem;    /* 12.8px  — captions, fine print */
  --rg-text-base:  0.9rem;    /* 14.4px  — body default */
  --rg-text-md:    1rem;      /* 16px    — slightly larger body */
  --rg-text-lg:    1.125rem;  /* 18px    — lead text */
  --rg-text-xl:    1.25rem;   /* 20px    — small headings */
  --rg-text-2xl:   1.5rem;    /* 24px    — section headings */
  --rg-text-3xl:   1.875rem;  /* 30px    — page headings */
  --rg-text-4xl:   2.25rem;   /* 36px    — hero headings */
  --rg-text-5xl:   3rem;      /* 48px    — display */

  --rg-font-light:    300;
  --rg-font-normal:   400;
  --rg-font-medium:   500;
  --rg-font-semibold: 600;
  --rg-font-bold:     700;

  --rg-leading-tight:  1.2;
  --rg-leading-snug:   1.4;
  --rg-leading-normal: 1.6;
  --rg-leading-loose:  1.75;

  --rg-tracking-tight:  -0.02em;
  --rg-tracking-normal: 0;
  --rg-tracking-wide:   0.05em;
  --rg-tracking-wider:  0.08em;

  /* ── SPACING ──────────────────────────────────────────────
     4px base grid. Use multiples of this everywhere.
  ────────────────────────────────────────────────────────── */
  --rg-space-1:   4px;
  --rg-space-2:   8px;
  --rg-space-3:   12px;
  --rg-space-4:   16px;
  --rg-space-5:   20px;
  --rg-space-6:   24px;
  --rg-space-8:   32px;
  --rg-space-10:  40px;
  --rg-space-12:  48px;
  --rg-space-16:  64px;
  --rg-space-20:  80px;
  --rg-space-24:  96px;

  /* ── BORDER RADIUS ────────────────────────────────────────  */
  --rg-radius-sm:   6px;
  --rg-radius-md:   10px;
  --rg-radius-lg:   14px;
  --rg-radius-xl:   20px;
  --rg-radius-full: 9999px;

  /* ── SHADOWS ──────────────────────────────────────────────  */
  --rg-shadow-xs:  0 1px 4px rgba(26,22,20,0.05);
  --rg-shadow-sm:  0 2px 8px rgba(26,22,20,0.06);
  --rg-shadow-md:  0 4px 16px rgba(26,22,20,0.08);
  --rg-shadow-lg:  0 8px 32px rgba(26,22,20,0.10);
  --rg-shadow-xl:  0 16px 48px rgba(26,22,20,0.13);

  --rg-shadow-primary: 0 6px 20px rgba(255, 75, 31, 0.3);

  /* ── TRANSITIONS ──────────────────────────────────────────  */
  --rg-ease-default: 0.2s ease;
  --rg-ease-spring:  0.38s cubic-bezier(0.22, 1, 0.36, 1);
  --rg-ease-in:      0.2s ease-in;
  --rg-ease-out:     0.25s ease-out;

  /* ── LAYOUT ───────────────────────────────────────────────  */
  --rg-max-width:      1100px;
  --rg-content-width:  820px;
  --rg-page-padding-x: 20px;

  /* ── Z-INDEX SCALE ────────────────────────────────────────
     Explicit z-index values prevent stacking surprises.
  ────────────────────────────────────────────────────────── */
  --rg-z-base:    1;
  --rg-z-raised:  10;
  --rg-z-nav:     100;
  --rg-z-dropdown:200;
  --rg-z-modal:   300;
  --rg-z-toast:   400;

  /* ── COMPONENT-SPECIFIC TOKENS ────────────────────────────
     Derived from base tokens. Override here to change one
     component without touching the base palette.
  ────────────────────────────────────────────────────────── */

  /* Nav */
  --rg-nav-height:     64px;
  --rg-nav-bg:         var(--rg-color-white);
  --rg-nav-border:     var(--rg-color-border);
  --rg-nav-link-color: var(--rg-color-text);
  --rg-nav-link-hover: var(--rg-color-primary);

  /* Cards */
  --rg-card-bg:        var(--rg-color-bg-card);
  --rg-card-border:    var(--rg-color-border);
  --rg-card-radius:    var(--rg-radius-lg);
  --rg-card-shadow:    var(--rg-shadow-md);
  --rg-card-padding:   var(--rg-space-6);

  /* Buttons */
  --rg-btn-radius:     var(--rg-radius-md);
  --rg-btn-font-size:  var(--rg-text-base);
  --rg-btn-font-weight:var(--rg-font-semibold);
  --rg-btn-padding-y:  10px;
  --rg-btn-padding-x:  var(--rg-space-5);

  /* Forms */
  --rg-input-bg:       var(--rg-color-bg-subtle);
  --rg-input-border:   var(--rg-color-border);
  --rg-input-border-focus: var(--rg-color-primary);
  --rg-input-radius:   var(--rg-radius-md);
  --rg-input-padding:  10px 12px;
  --rg-input-font-size:var(--rg-text-md);

  /* Modal */
  --rg-modal-bg:       var(--rg-color-white);
  --rg-modal-overlay:  rgba(26,22,20,0.55);
  --rg-modal-radius:   var(--rg-radius-xl);
  --rg-modal-shadow:   var(--rg-shadow-xl);

  /* Accordion */
  --rg-accordion-border: var(--rg-color-border);

  /* Tabs */
  --rg-tab-active-color:  var(--rg-color-primary);
  --rg-tab-border-color:  var(--rg-color-border);

  /* Toast */
  --rg-toast-radius:  var(--rg-radius-md);
  --rg-toast-shadow:  var(--rg-shadow-lg);

  /* Footer */
  --rg-footer-bg:         var(--rg-color-coal);
  --rg-footer-text:       rgba(255,255,255,0.65);
  --rg-footer-link:       rgba(255,255,255,0.8);
  --rg-footer-link-hover: var(--rg-color-fire-light);
  --rg-footer-border:     rgba(255,255,255,0.1);
}