/* ============================================================
   DESIGN TOKENS: COLORS
   Diocese of Southwark Brand Palette
   ============================================================ */

:root {
    /* ========================================
       BRAND COLORS (Primary Palette)
       ======================================== */
    --ds-brand-red: #E30513;
    --ds-brand-red-dark: #99030F;
    --ds-brand-red-darker: #7A020C;

    /* ========================================
       EXTENDED PALETTE
       ======================================== */
    --ds-green: #28a745;
    --ds-green-dark: #218838;
    --ds-green-darker: #1e7e34;

    --ds-teal: #17a2b8;
    --ds-teal-dark: #138496;
    --ds-teal-darker: #0f6674;

    --ds-brown: #8B4513;
    --ds-brown-dark: #6B340F;
    --ds-brown-darker: #4B240B;

    --ds-orange: #fd7e14;
    --ds-orange-dark: #e86d06;
    --ds-orange-darker: #ca6002;

    /* ========================================
       NEUTRAL COLORS
       ======================================== */
    --ds-white: #ffffff;
    --ds-black: #000000;
    --ds-gray-50: #f8f9fa;
    --ds-gray-100: #f0f0f0;
    --ds-gray-200: #e9ecef;
    --ds-gray-300: #dee2e6;
    --ds-gray-400: #ced4da;
    --ds-gray-500: #adb5bd;
    --ds-gray-600: #6c757d;
    --ds-gray-700: #495057;
    --ds-gray-800: #343a40;
    --ds-gray-900: #212529;

    /* ========================================
       SEMANTIC COLORS (Context-based)
       ======================================== */
    --ds-color-primary: var(--ds-brand-red);
    --ds-color-primary-hover: var(--ds-brand-red-dark);
    --ds-color-primary-active: var(--ds-brand-red-darker);

    --ds-color-secondary: var(--ds-gray-600);
    --ds-color-secondary-hover: var(--ds-gray-700);
    --ds-color-secondary-active: var(--ds-gray-800);

    --ds-color-success: var(--ds-green);
    --ds-color-success-hover: var(--ds-green-dark);

    --ds-color-danger: var(--ds-brand-red);
    --ds-color-danger-hover: var(--ds-brand-red-dark);

    --ds-color-edit: var(--ds-link-color);
    --ds-color-edit-hover: var(--ds-link-hover);
    --ds-color-edit-active: var(--ds-link-active);

    --ds-color-warning: var(--ds-orange);
    --ds-color-warning-hover: var(--ds-orange-dark);

    --ds-color-info: #0dcaf0;

    /* ========================================
       LINK COLORS
       ======================================== */
    --ds-link-color: #0d6efd;
    --ds-link-hover: #0b5ed7;
    --ds-link-active: #0a58ca;

    /* Button action colors */
    --ds-color-create: var(--ds-green);
    --ds-color-create-hover: var(--ds-green-dark);
    --ds-color-create-active: var(--ds-green-darker);

    --ds-color-send: var(--ds-teal);
    --ds-color-send-hover: var(--ds-teal-dark);
    --ds-color-send-active: var(--ds-teal-darker);

    --ds-color-export: var(--ds-brown);
    --ds-color-export-hover: var(--ds-brown-dark);
    --ds-color-export-active: var(--ds-brown-darker);

    /* ========================================
       SURFACE COLORS (Backgrounds)
       ======================================== */
    --ds-surface-primary: var(--ds-white);
    --ds-surface-secondary: var(--ds-gray-50);
    --ds-surface-tertiary: var(--ds-gray-100);

    /* ========================================
       TEXT COLORS
       ======================================== */
    --ds-text-primary: var(--ds-gray-900);
    --ds-text-secondary: var(--ds-gray-700);
    --ds-text-muted: var(--ds-gray-600);
    --ds-text-disabled: var(--ds-gray-400);
    --ds-text-inverse: var(--ds-white);

    /* ========================================
       BORDER COLORS
       ======================================== */
    --ds-border-color: var(--ds-gray-300);
    --ds-border-color-light: var(--ds-gray-200);
    --ds-border-color-dark: var(--ds-gray-400);

    /* ========================================
       FOCUS & INTERACTION
       ======================================== */
    --ds-focus-ring: 0 0 0 0.25rem rgba(227, 5, 19, 0.25);
}