/* Ratchet Learning — Slate/Teal Theme */

[data-brand="rl"] {
    --color-primary: #0d9488;
    --color-primary-rgb: 13, 148, 136;
    --color-primary-dark: #0f766e;
    --color-primary-light: #14b8a6;
    --color-accent: #334155;
    --color-accent-rgb: 51, 65, 85;

    --color-bg: #f8fafb;
    --color-bg-elevated: #ffffff;
    --color-bg-card: #ffffff;
    --color-bg-card-hover: #f0fdfa;
    --color-bg-subtle: #e0f2f1;

    --color-text: #0f172a;
    --color-text-secondary: #475569;
    --color-text-tertiary: #94a3b8;
    --color-text-inverse: #ffffff;

    --color-border: rgba(15, 23, 42, 0.08);
    --color-border-hover: rgba(15, 23, 42, 0.15);

    --gradient-hero: linear-gradient(135deg, #134e4a 0%, #0f766e 40%, #0f172a 100%);
    --gradient-accent: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    --gradient-text: linear-gradient(135deg, #0d9488 0%, #334155 100%);
    --gradient-card: linear-gradient(145deg, rgba(13,148,136,0.03) 0%, rgba(51,65,85,0.03) 100%);
    --gradient-glow: radial-gradient(ellipse at 50% 0%, rgba(13,148,136,0.12) 0%, transparent 60%);

    --pattern-dots: radial-gradient(circle, rgba(15,23,42,0.04) 1px, transparent 1px);
    --pattern-size: 24px 24px;

    color-scheme: light;
}

/* Hero text on gradient */
[data-brand="rl"] .hero--gradient { color: #fff; }
[data-brand="rl"] .hero--gradient .hero__subtitle { color: rgba(255,255,255,0.85); }
[data-brand="rl"] .hero--gradient .hero__eyebrow {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

/* Header on gradient hero */
[data-brand="rl"] .site-header { color: #ffffff; }
[data-brand="rl"] .site-header .nav-link { color: rgba(255, 255, 255, 0.85); }
[data-brand="rl"] .site-header .nav-link:hover { color: #ffffff; background: rgba(255, 255, 255, 0.15); }
[data-brand="rl"] .site-header .logo { color: #ffffff; }
[data-brand="rl"] .site-header.scrolled { background: rgba(255, 255, 255, 0.95); }
[data-brand="rl"] .site-header.scrolled .nav-link { color: var(--color-text-secondary); }
[data-brand="rl"] .site-header.scrolled .nav-link:hover { color: var(--color-text); background: var(--color-border); }
[data-brand="rl"] .site-header.scrolled .logo { color: var(--color-text); }