/*
 * IRIS Cocreative Brand Variables
 * Global Design System Tokens
 *
 * Usage: Link this file before your component styles
 * <link rel="stylesheet" href="../shared/iris-brand.css">
 */

:root {
    /* ========================================
       Core Brand Colors
       ======================================== */
    --black: #0e0e0e;
    --snow: #fffcfb;

    /* Primary Brand */
    --iris-brand: #335d75;
    --iris-teal: #3ea691;

    /* ========================================
       Technology Brand Colors
       ======================================== */
    --supabase: #63c389;
    --talkjs: #b4b4b4;
    --activecampaign: #456ee1;
    --gmail: #d95646;
    --grasshopper: #c0ed61;
    --js: #f4e150;
    --whalesync: #48a0eb;
    --claude: #ce8063;
    --github: #737ec2;
    --n8n: #d95773;
    --airtable: #da434f;
    --dailyco: #ffffff;
    --mapbox: #4a63f2;
    --webflow: #336ded;

    /* ========================================
       Wizardry: Responsive Golden Ratio System
       Fluid typography & spacing using clamp()
       Base: 16px (1rem), viewport range: 320px - 1600px
       ======================================== */
    --min-vw: 320;
    --max-vw: 1600;
    --fluid-bp: calc((100vw - 320px) / (1600 - 320));

    /* Golden Ratio Spacing - Responsive */
    --phi: 1.618em;
    --phi-1: 1em;
    --phi-2: 2.618em;
    --phi-3: 4.236em;
    --phi-4: 6.854em;
    --phi-5: 11.09em;
    --phi-6: 17.944em;
    --phi-7: 29.034em;
    --phi-8: 46.979em;

    /* Fractional Phi - Responsive */
    --phi-01: .618em;
    --phi-02: .382em;
    --phi-03: 0.236em;
    --phi-04: .146em;
    --phi-05: .09em;

    /* Typography Scale - Responsive Golden Ratio */
    --phi-1-618: 1.618em;
    --phi-1-382: 1.382em;
    --phi-1-146: 1.146em;

    /* ========================================
       UI Colors
       ======================================== */
    --line-grey: #3c3c3c;
    --silver: #aebabc;
    --grey: #8b8b8b;
    --gold: #f4c134;
    --dark-magenta: #954298;
    --red: #ce4320;

    /* ========================================
       Project Status Colors
       ======================================== */
    --planning: #f4c134;
    --in-progress: #63c389;
    --completing: #48a0eb;
    --complete: #3ea691;
    --blocked: #d95646;

    /* ========================================
       Dark Theme
       ======================================== */
    --bg-dark: #0a0a0f;
    --bg-card: #0a0c17d6;
    --bg-sidebar: #0a0c179e;
    --border-subtle: rgba(255, 252, 251, 0.08);
    --text-muted: rgba(255, 252, 251, 0.6);
    --accent-glow: rgba(51, 93, 117, 0.15);

    /* ========================================
       Domain Colors
       ======================================== */
    --domain-development: #336ded;
    --domain-design: #954298;
    --domain-operations: #f4c134;
    --domain-platform: #3ea691;

    /* ========================================
       Component Styles
       ======================================== */
    --border-radius: 1em;
    --border-radius-sm: 0.5em;
    --border-radius-lg: 1.5em;

    /* ========================================
       Shadows
       ======================================== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);

    /* ========================================
       Transitions
       ======================================== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.4s ease;
}

/* ========================================
   Light Theme
   Applied when [data-theme="light"] on html
   ======================================== */
[data-theme="light"] {
    --bg-dark: #f5f5f5;
    --bg-card: rgba(255, 255, 255, 0.9);
    --bg-sidebar: rgba(245, 245, 245, 0.95);
    --border-subtle: rgba(0, 0, 0, 0.1);
    --text-muted: rgba(14, 14, 14, 0.6);
    --accent-glow: rgba(51, 93, 117, 0.1);
    --line-grey: #d0d0d0;
    --silver: #5a6a6c;
    --grey: #6b6b6b;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Swap text colors in light mode */
[data-theme="light"] body,
[data-theme="light"] .snow,
[data-theme="light"] .document-content,
[data-theme="light"] .document-content p,
[data-theme="light"] .document-content li,
[data-theme="light"] .document-content h1,
[data-theme="light"] .document-content h2,
[data-theme="light"] .document-content h3,
[data-theme="light"] .document-content h4 {
    color: var(--black);
}

[data-theme="light"] .document-content h3 {
    color: var(--iris-brand);
}

[data-theme="light"] .header,
[data-theme="light"] .sidebar {
    background: rgba(255, 255, 255, 0.95);
}

[data-theme="light"] .document {
    background: rgba(255, 255, 255, 0.98);
}

[data-theme="light"] .title-text,
[data-theme="light"] .section-title,
[data-theme="light"] .domain-name,
[data-theme="light"] .folder-header,
[data-theme="light"] .resource-link {
    color: var(--black);
}

[data-theme="light"] .document-content code {
    background: #e8e8e8;
    border-color: #d0d0d0;
}

[data-theme="light"] .document-content pre {
    background: #1a1a1a;
}

[data-theme="light"] .document-content pre code {
    color: var(--silver);
    background: transparent;
}

[data-theme="light"] body::before {
    opacity: 0.05;
}