/* ============================================================
 *  RT Digital Indonesia — Design Tokens
 *  Shared CSS custom properties (colors, spacing, typography, shadows)
 *  Loaded by layout.php (dashboard) and landing.css (public pages)
 *
 *  NOTE: --accent can be overridden per-page via inline <style>
 *        for brand-color theming. Do not hardcode overrides here.
 *  Design system: Zapier-inspired warm-cream + coffee-ink + orange CTA
 * ============================================================ */

:root {
    /* ── Warm ink palette (replaces teal — kept for compat) ── */
    --teal-700: #201515;
    --teal-600: #2f2a26;
    --teal-500: #36342e;
    --teal-300: #605d52;
    --teal-100: #f8f4f0;
    --teal-50:  #fffefb;

    /* ── Orange palette (Zapier primary) ── */
    --orange-700: #cc3d00;
    --orange-500: #ff4f00;
    --orange-300: #ff8c66;
    --orange-50:  #fff3ee;

    /* ── Green palette (status/success indicators) ── */
    --green-600: #16a34a;
    --green-500: #22c55e;
    --green-50:  #f0fdf4;

    /* ── Surfaces — warm cream ── */
    --bg-canvas:       #fffefb;
    --bg-paper:        #fffefb;
    --bg-section-alt:  #f8f4f0;
    --bg-dark-section: #201515;

    /* ── Text — warm coffee ── */
    --fg-primary:   #201515;
    --fg-secondary: #605d52;
    --fg-tertiary:  #939084;

    /* ── Brand = coffee ink ── */
    --brand:       #201515;
    --brand-hover: #2f2a26;
    --brand-soft:  #f8f4f0;

    /* ── Accent = Zapier orange (primary CTAs) ── */
    --accent:      #ff4f00;
    --accent-dark: #cc3d00;
    --accent-deep: #a33100;
    --accent-soft: #fff3ee;
    --accent-fg:   #fffefb;

    /* ── Semantic colors (alerts, status, validation) ── */
    --color-error:        #dc2626;
    --color-success:      #16a34a;
    --color-warning:      #d97706;
    --color-info:         #2563eb;
    --color-error-soft:   rgba(220,38,38,0.06);
    --color-success-soft: rgba(22,163,74,0.06);
    --color-warning-soft: rgba(217,119,6,0.06);
    --color-info-soft:    rgba(37,99,235,0.06);
    --color-error-border:   rgba(220,38,38,0.2);
    --color-success-border: rgba(22,163,74,0.2);
    --color-warning-border: rgba(217,119,6,0.2);
    --color-info-border:    rgba(37,99,235,0.2);

    /* ── Borders — warm muted ── */
    --border-subtle:  #e8e3da;
    --border-default: #c5c0b1;

    /* ── Shadows — warm-toned ── */
    --shadow-sm: 0 1px 2px rgba(32,21,21,0.06);
    --shadow-md: 0 4px 20px rgba(32,21,21,0.08);
    --shadow-lg: 0 20px 50px rgba(32,21,21,0.12);

    /* ── Typography ── */
    --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, monospace;

    /* ── Border radius — Zapier signature ── */
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-pill: 9999px;

    /* ── Motion ── */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* ── Layout ── */
    --content-max: 1200px;
}