/**
 * ROU Design Tokens — single source of truth for the ROU SaaS visual style.
 *
 * Loaded before every ROU stylesheet that consumes brand colors / fonts.
 * The dashboard (wp-content/plugins/rou-core/assets/admin/css/00-tokens.css)
 * is intended to mirror these values in phase 2 so the entire SaaS shares
 * one visual language.
 *
 * Naming:
 *   - Modern tokens:  --rou-{role}[-shade]
 *   - Legacy aliases: --rou-red[-dark|-light], --rou-cream, etc. — kept so
 *                     consumers that haven't been migrated yet keep working.
 */

:root {
    /* Brand palette (mirrors ROU_Landing_Page.html Tailwind config) */
    --rou-primary:        #D90F32;
    --rou-primary-dark:   #B00D29;
    --rou-primary-light:  #FF4D6A;
    --rou-secondary:      #F97316;
    --rou-secondary-dark: #EA580C;
    --rou-accent:         #84CC16;
    --rou-accent-dark:    #65A30D;
    --rou-accent-soft:    rgba(132, 204, 22, 0.12);

    /* Surfaces */
    --rou-cream:          #FFF7ED;
    --rou-cream-soft:     #FFFCF5;
    --rou-surface:        #FFFFFF;
    --rou-surface-muted:  #F8F8F7;
    --rou-border:         #E5E7EB;
    --rou-border-strong:  rgba(0, 0, 0, 0.12);

    /* Text */
    --rou-text:           #3F3F46;
    --rou-text-strong:    #1E1E1E;
    --rou-text-light:     #71717A;
    --rou-text-muted:     #9CA3AF;

    /* Semantic accents (same scale used across landing + dashboard) */
    --rou-success:        #16A34A;
    --rou-warning:        #F59E0B;
    --rou-danger:         #DC2626;
    --rou-info:           #0284C7;

    /* Decorative warmer accents */
    --rou-gold:           #D4AF37;

    /* Typography */
    --rou-font-display:   'Poppins', 'Inter', 'Noto Sans SC', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --rou-font-body:      'Poppins', 'Inter', 'Noto Sans SC', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --rou-font-mono:      ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

    /* Radii */
    --rou-radius-xs: 4px;
    --rou-radius-sm: 8px;
    --rou-radius:    12px;
    --rou-radius-lg: 16px;
    --rou-radius-xl: 20px;
    --rou-radius-2xl: 24px;

    /* Shadows */
    --rou-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --rou-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.06);
    --rou-shadow:    0 4px 14px rgba(0, 0, 0, 0.08);
    --rou-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.10);
    --rou-shadow-lg: 0 20px 40px rgba(217, 15, 50, 0.15);
    --rou-shadow-xl: 0 25px 50px rgba(217, 15, 50, 0.30);
    --rou-glow:      0 0 20px rgba(217, 15, 50, 0.40);
    --rou-glow-strong: 0 0 30px rgba(217, 15, 50, 0.60);

    /* Motion */
    --rou-ease:      cubic-bezier(.05, .7, .1, 1);
    --rou-ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
    --rou-duration-fast:    150ms;
    --rou-duration-base:    200ms;
    --rou-duration-slow:    300ms;
    --rou-duration-slower:  600ms;

    /* ── Legacy aliases (keep working until every consumer is migrated) ── */
    --rou-red:        var(--rou-primary);
    --rou-red-dark:   var(--rou-primary-dark);
    --rou-red-light:  var(--rou-primary-light);
    --rou-white:      var(--rou-surface);
    --rou-charcoal:   var(--rou-text-strong);
    --rou-smoke:      var(--rou-surface-muted);
    --rou-dew:        #E0F0F7;
    --rou-gray:       var(--rou-text);
    --radius:         var(--rou-radius);
    --shadow:         var(--rou-shadow);
    --ease:           var(--rou-ease);
}