/* --- tokens.css: Design tokens for all tenants --- */
/*
 * This file contains CSS custom properties (design tokens) that define
 * the visual language of the application. Tenants can override these
 * values in their own CSS files.
 *
 * Usage: Import this file before other stylesheets.
 */

/* === Font Faces === */
/*
 * Google Sans Flex - Google's brand typeface (OFL-1.1 licensed)
 * Self-hosted for consistent rendering and better kerning across platforms.
 * See static/common/fonts/OFL.txt for license.
 */

@font-face {
    font-family: 'Google Sans Flex';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Google Sans Flex';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/latin-500-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Google Sans Flex';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/latin-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* ============================================
       COLOR TOKENS
       ============================================ */

    /* --- Core Palette --- */
    --color-text: #333;
    --color-text-muted: #666;
    --color-text-light: #999;
    --color-background: #f8f9fa;
    --color-surface: #ffffff;
    --color-border: #dee2e6;
    --color-border-light: #e9ecef;

    /* --- Brand Colors --- */
    --color-primary: #3498db;
    --color-primary-hover: #2980b9;
    --color-primary-light: #e8f4fc;

    /* --- Semantic Colors --- */
    --color-success: #27ae60;
    --color-success-light: #d4edda;
    --color-success-dark: #155724;
    --color-danger: #dc3545;
    --color-danger-light: #f8d7da;
    --color-danger-dark: #721c24;
    --color-warning: #d4a537;
    --color-warning-light: #fff3cd;
    --color-warning-dark: #856404;

    /* --- Navigation --- */
    --color-nav-bg: #2c3e50;
    --color-nav-text: #ffffff;
    --color-nav-hover: #5a6a7a;
    --color-nav-muted: #95a5a6;

    /* --- Content Block Colors --- */

    /* Scripture blocks - cool gray (original styling) */
    --color-scripture-bg: #e9ecef;
    --color-scripture-border: #ced4da;
    /* Accent/text for UI elements that historically used "scripture" naming */
    /* These are warm brown, aliased to practice for backwards compatibility */
    --color-scripture-accent: var(--color-practice-accent);
    --color-scripture-text: var(--color-practice-text);
    --color-scripture-bg-light: var(--color-practice-bg-light);

    /* Prayer blocks */
    --color-prayer-accent: #7dbdb4;
    --color-prayer-bg: #f4faf9;
    --color-prayer-border: #e8f4f2;
    --color-prayer-text: #3d7a73;

    /* Reflection blocks */
    --color-reflection-accent: #9ab392;
    --color-reflection-bg: #f6faf5;
    --color-reflection-border: #eef4ec;
    --color-reflection-text: #5a7052;

    /* Info/callout blocks */
    --color-info-accent: #5b8fa8;
    --color-info-bg: #f0f7fc;
    --color-info-border: #d4ebf9;
    --color-info-text: #4a5a6a;

    /* --- Feature Colors --- */

    /* Practices - warm brown family (icons, cards, tooltips) */
    --color-practice-accent: #8b7355;
    --color-practice-bg: #f5f2ee;
    --color-practice-bg-light: #fdfbf7;
    --color-practice-border: #e8e4df;
    --color-practice-border-light: #e6d9b8;
    --color-practice-text: #6b5a45;

    /* Behind Stories - shares practice palette */
    --color-behind-accent: var(--color-practice-accent);
    --color-behind-bg: var(--color-practice-bg);
    --color-behind-bg-light: var(--color-practice-bg-light);
    --color-behind-border: var(--color-practice-border);
    --color-behind-border-light: var(--color-practice-border-light);
    --color-behind-text: var(--color-practice-text);

    /* --- Legacy Aliases (for backwards compatibility) --- */
    --text-color: var(--color-text);
    --background-color: var(--color-background);
    --accent-color: var(--color-primary);
    --border-color: var(--color-border);
    --card-background: var(--color-surface);

    /* ============================================
       TYPOGRAPHY TOKENS
       ============================================ */

    /* Primary font: Google Sans Flex with system font fallbacks */
    --primary-font: "Google Sans Flex", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

    /* Serif font: Web-safe serif for headings and article content */
    --serif-font: "Georgia", "Times New Roman", serif;

    /* ============================================
       SHADOW TOKENS
       ============================================ */

    /* Elevation scale for consistent depth perception */
    /* Level 1: Subtle - cards, chips, light UI elements */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);

    /* Level 2: Cards - content cards, hover states */
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);

    /* Level 3: Dropdowns, popovers - floating UI */
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.12);

    /* Level 4: Modals - highest elevation */
    --shadow-2xl: 0 20px 60px rgba(0, 0, 0, 0.2);

    /* Focus rings - accessibility */
    --shadow-focus: 0 0 0 2px var(--color-primary-light);
    --shadow-focus-warning: 0 0 0 2px rgba(212, 165, 55, 0.15);

    /* Inset shadows - pressed states, inner depth */
    --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.06);

    /* ============================================
       SPACING TOKENS
       ============================================ */
    /* (Future: Add spacing scale when needed) */

    /* ============================================
       BORDER TOKENS
       ============================================ */
    /* (Future: Add border-radius scale when needed) */
}