/* ABOUTME: Copy of the OpenDLP app's semantic design tokens (backend/static/backoffice/tokens/semantic.css) */
/* ABOUTME: Kept identical to the app, so the docs site and the app share one set of purpose-named colours */

/**
 * Semantic Design Tokens
 * Purpose-based tokens that reference primitives
 * Names derived from the design system usage descriptions
 */

:root {
    /* ========================================
     BRAND SEMANTIC TOKENS
     ======================================== */

    --color-light-highlights: var(--color-brand-50);
    --color-selection-background: var(--color-brand-100);
    --color-subtle-emphasis: var(--color-brand-200);
    --color-buttons-secondary: var(--color-brand-300);
    --color-primary-action: var(--color-brand-400);
    --color-active-states: var(--color-brand-500);
    --color-hover-dark-ui: var(--color-brand-600);
    --color-pressed: var(--color-brand-700);
    --color-dark-accents: var(--color-brand-800);

    /* ========================================
     NEUTRAL SEMANTIC TOKENS
     ======================================== */

    --color-page-background: var(--color-neutral-0);
    --color-bg-secondary: var(--color-neutral-50);
    --color-subtle-background-panels: var(--color-neutral-50);
    --color-tables-cards: var(--color-neutral-0);
    --color-borders-dividers: var(--color-neutral-200);
    --color-disabled-borders: var(--color-neutral-300);
    --color-placeholder-text: var(--color-neutral-400);
    --color-secondary-text: var(--color-neutral-500);
    --color-body-text: var(--color-neutral-600);
    --color-headings: var(--color-neutral-700);
    --color-navigation-bars: var(--color-neutral-800);
    --color-dark-mode-base: var(--color-neutral-900);
    --color-table-row-alt: var(--color-neutral-50);

    /* ========================================
     LINK COLOURS
     Tailwind preflight sets a { color: inherit }, so links must opt in.
     ======================================== */

    --color-links: var(--color-primary-action);
    --color-link-text: var(--color-primary-action);

    /* ========================================
     FOCUS RING

     Currently using browser default focus outline (black/white double
     outline in Chrome) for better contrast against any background.

     To enable custom focus color across all components, add
     outline-color: var(--color-focus-ring) to focus styles.
     ======================================== */

    --color-focus-ring: var(--color-brand-400);
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;

    /* ========================================
     BUTTON SEMANTIC TOKENS
     ======================================== */

    /* Primary Button */
    --color-button-primary-bg: var(--color-brand-400);
    --color-button-primary-bg-hover: var(--color-brand-600);
    --color-button-primary-text: var(--color-neutral-0);

    /* Secondary Button */
    --color-button-secondary-bg: var(--color-neutral-0);
    --color-button-secondary-bg-hover: var(--color-neutral-200);
    --color-button-secondary-border: var(--color-neutral-700);
    --color-button-secondary-text: var(--color-neutral-700);

    /* Tertiary (Ghost) & Icon-only Button */
    --color-button-tertiary-bg: transparent;
    --color-button-tertiary-bg-hover: var(--color-neutral-200);
    --color-button-tertiary-text: var(--color-neutral-700);

    /* Danger (destructive ghost) Button */
    --color-button-danger-bg: transparent;
    --color-button-danger-bg-hover: var(--color-error-100);
    --color-button-danger-text: var(--color-error-600);

    /* ========================================
     ALERT / STATUS COLORS
     100 = background, 400 = border, 600 = text
     ======================================== */

    /* Success - Green */
    --color-success-100: #E6F4EA;
    --color-success-400: #2E8B57;
    --color-success-600: #1F6A42;

    /* Warning - Amber */
    --color-warning-100: #FFF4E5;
    --color-warning-400: #D9822B;
    --color-warning-600: #A6631E;

    /* Error - Red */
    --color-error-100: #FDEBEC;
    --color-error-400: #C70039;
    --color-error-600: #90003F;

    /* Info - Blue */
    --color-info-100: #E8F1FA;
    --color-info-400: #3A7BD5;
    --color-info-600: #2B5FA6;

    /* Purpose-named aliases onto the 100/400/600 scale */
    --color-success-background: var(--color-success-100);
    --color-success-border: var(--color-success-400);
    --color-success-text: var(--color-success-600);
    --color-warning-background: var(--color-warning-100);
    --color-warning-border: var(--color-warning-400);
    --color-warning-text: var(--color-warning-600);
    --color-error-background: var(--color-error-100);
    --color-error-text: var(--color-error-600);
    --color-info-background: var(--color-info-100);
    --color-info-border: var(--color-info-400);
    --color-info-text: var(--color-info-600);
}