/* Contexta Designer - Design Tokens */
/* Generated: 2026-01-23T20:44:19.984Z */
/*
   Structure:
   - Layer 1: Brand Palette (ONLY actual hex/pixel values)
   - Layer 2: Semantic Tokens (colors use var() refs)
   - Layer 3: Framework Overrides
   - Layer 4: Backward Compatibility Aliases
   
   TO CHANGE THEME: Only edit Layer 1 values
   Everything else cascades automatically via var() references
*/
/* ============================================================================
   LAYER 1: BRAND PALETTE
   The ONLY place hex/pixel values should be defined.
   Change these to change your entire color scheme.
   ============================================================================ */
:root {
    /* Brand Colors */
    --ctx-navy: #1F5240;
    --ctx-teal: #5D8B84;
    --ctx-green: #6D9B84;
    --ctx-gold: #D5A344;
    --ctx-light: #EFEBEE;
    --ctx-cream: #F5FAC0;

    /* Derived Colors (auto-generated for templates) */
    --ctx-navy-dark: #15392c;
    --ctx-navy-light: #628579;
    --ctx-teal-dark: #41615c;
    --ctx-teal-light: #8dada8;
    --ctx-green-dark: #4c6c5c;
    --ctx-green-light: #98b9a8;
    --ctx-gold-dark: #95722f;
    --ctx-gold-light: #e1be7c;
    --ctx-light-dark: #a7a4a6;
    --ctx-light-light: #f3f1f3;
    --ctx-cream-dark: #abaf86;
    --ctx-cream-light: #f8fbd2;

    /* Neutrals */
    --white: #ffffff;
    --gray-100: #e5e2e4;
    --gray-200: #d5d2d4;
    --gray-300: #b8b5b7;
    --gray-400: #9a979a;
    --gray-500: #6b686b;
    --gray-600: #4d5a54;
    --color-gray-700: #343a40;
    --gray-700: #3d5a54;
    --color-gray-800: #212529;
    --gray-900: #152a20;

    /* Additional Base Colors */
    --base-success-hover: #218838;
    --base-danger: #dc3545;
    --base-danger-dark: #721c24;
    --base-accent: #10b981;
    --base-accent-hover: #059669;
    --base-warning-dark: #a88a30;
    --base-error: #c45c5c;
    --base-error-dark: #8b3d3d;

    /* Base Tokens (actual values) */
    --radius-base: 0.5rem;
    --radius-sm-base: 0.25rem;
    --radius-lg-base: 0.75rem;
    --radius-xl-base: 1rem;
    --radius-full-base: 9999px;
    --font-sans-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono-base: 'SF Mono', Monaco, Consolas, monospace;
    --text-xs-base: 0.75rem;
    --text-sm-base: 0.875rem;
    --text-base-base: 1rem;
    --text-lg-base: 1.125rem;
    --text-xl-base: 1.25rem;
    --text-2xl-base: 1.5rem;
    --text-3xl-base: 1.875rem;
    --shadow-sm-base: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-base: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md-base: 0 4px 6px -1px rgba(0,0,0,0.1);
    --shadow-lg-base: 0 10px 15px -3px rgba(0,0,0,0.1);
    --transition-fast-base: 150ms ease;
    --transition-base-base: 200ms ease;
    --z-dropdown-base: 100;
    --z-sticky-base: 200;
    --z-modal-base: 500;

}

/* ============================================================================
   LAYER 2: SEMANTIC TOKENS
   ALL colors use var() references. Non-colors have actual values.
   ============================================================================ */
:root {
    /* Semantic Colors */
    --color-bg-surface: var(--white);
    --color-bg-muted: var(--ctx-light);
    --color-bg-subtle: var(--ctx-light);
    --color-border-default: var(--gray-200);
    --color-border-strong: var(--gray-400);
    --color-primary: var(--ctx-teal);
    --color-primary-hover: var(--ctx-navy);
    --color-primary-dark: var(--ctx-navy);
    --color-success: var(--ctx-green);
    --color-success-hover: var(--base-success-hover);
    --color-success-light: var(--ctx-light);
    --color-success-dark: var(--ctx-navy);
    --color-warning: var(--ctx-gold);
    --color-danger: var(--base-danger);
    --color-danger-hover: var(--base-danger);
    --color-danger-light: var(--gray-100);
    --color-danger-dark: var(--base-danger-dark);
    --color-info: var(--ctx-teal);
    --color-accent: var(--base-accent);
    --color-accent-hover: var(--base-accent-hover);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --color-warning-light: var(--ctx-light);
    --color-warning-dark: var(--base-warning-dark);
    --color-error: var(--base-error);
    --color-error-light: var(--ctx-light);
    --color-error-dark: var(--base-error-dark);
    --color-info-light: var(--ctx-light);

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Typography */
    --color-text-primary: var(--gray-900);
    --color-text-secondary: var(--gray-600);
    --color-text-muted: var(--gray-500);
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --text-sm: 0.875rem;
    --text-lg: 1.125rem;
    --text-3xl: 1.875rem;

    /* Other */
    --pico-card-sectioning-background-color: var(--ctx-light);

    /* Semantic References (for theming) */
    --gray-50: var(--ctx-light);
    --radius: var(--radius-base);
    --radius-sm: var(--radius-sm-base);
    --radius-md: var(--radius-base);
    --radius-lg: var(--radius-lg-base);
    --radius-xl: var(--radius-xl-base);
    --radius-full: var(--radius-full-base);
    --border-radius: var(--radius-base);
    --border-radius-sm: var(--radius-sm-base);
    --border-radius-lg: var(--radius-lg-base);
    --border-radius-xl: var(--radius-xl-base);
    --border-radius-full: var(--radius-full-base);
    --font-sans: var(--font-sans-base);
    --font-mono: var(--font-mono-base);
    --text-xs: var(--text-xs-base);
    --text-base: var(--text-base-base);
    --text-xl: var(--text-xl-base);
    --text-2xl: var(--text-2xl-base);
    --shadow: var(--shadow-base);
    --shadow-md: var(--shadow-md-base);
    --shadow-lg: var(--shadow-lg-base);
    --transition-fast: var(--transition-fast-base);
    --transition-base: var(--transition-base-base);
    --z-dropdown: var(--z-dropdown-base);
    --z-sticky: var(--z-sticky-base);
    --z-modal: var(--z-modal-base);
    --color-bg: var(--ctx-light);

}

/* ============================================================================
   FRAMEWORK OVERRIDES
   Auto-detected frameworks: Pico CSS, Open Props
   These map framework variables to your semantic tokens
   ============================================================================ */

/* Pico CSS (medium confidence) */
:root {
    --pico-primary: var(--color-primary);
    --pico-primary-hover: var(--color-primary-dark);
    --pico-primary-inverse: var(--white);
    --pico-background-color: var(--color-bg);
    --pico-card-background-color: var(--white);
    --pico-card-sectioning-background-color: var(--gray-50);
    --pico-form-element-active-border-color: var(--color-primary);
    --pico-form-element-focus-color: var(--color-primary);
    --pico-switch-checked-background-color: var(--color-primary);
    --pico-font-family: var(--font-sans);
    --pico-border-radius: var(--radius);
    --pico-table-border-color: var(--gray-200);
    --pico-color: var(--gray-900);
    --pico-muted-color: var(--gray-500);
    --pico-border-color: var(--gray-200);
}

/* Open Props (low confidence) */
:root {
    --link: var(--color-primary);
    --link-visited: var(--color-primary-dark);
    --text-1: var(--gray-900);
    --text-2: var(--gray-700);
    --surface-1: var(--white);
    --surface-2: var(--gray-50);
    --surface-3: var(--gray-100);
    --surface-4: var(--gray-200);
}



/* ============================================================================
   BACKWARD COMPATIBILITY ALIASES
   ============================================================================ */
:root {
    --brand-primary: var(--ctx-teal);
    --brand-primary-dark: var(--ctx-navy);
    --color-info-dark: var(--ctx-navy);
    --color-primary-light: var(--ctx-green);
    --color-bg-light: var(--ctx-light);
    --space-xs: var(--spacing-xs);
    --space-sm: var(--spacing-sm);
    --space-md: var(--spacing-md);
    --space-lg: var(--spacing-lg);
    --space-xl: var(--spacing-xl);
    --space-2xl: 48px;
    --color-gray-50: var(--gray-50);
    --color-gray-100: var(--gray-100);
    --color-gray-200: var(--gray-200);
    --color-gray-300: var(--gray-300);
    --color-gray-400: var(--gray-400);
    --color-gray-500: var(--gray-500);
    --color-gray-600: var(--gray-600);
    --color-gray-700: var(--gray-700);
    --color-gray-900: var(--gray-900);
}