/*
 * APS shared visual design tokens
 *
 * Used by:
 *   - Public
 *   - Portal
 *   - Admin
 *
 * Keep component/layout rules out of this file.
 */

:root {
    /* ---------------------------------------------------------
       BRAND PALETTE
       --------------------------------------------------------- */

    /* Crimson Red */
    --aps-red-100: #FAD4D7;
    --aps-red-200: #F7A9B0;
    --aps-red-300: #ED7D87;
    --aps-red-400: #D8505D;
    --aps-red-500: #A31621;
    --aps-red-600: #8C121C;
    --aps-red-700: #6F0E16;
    --aps-red-800: #500A10;

    /* Steel Blue */
    --aps-blue-100: #D6E6ED;
    --aps-blue-200: #B7D1DD;
    --aps-blue-300: #93B8C9;
    --aps-blue-400: #6FA0B4;
    --aps-blue-500: #4E8098;
    --aps-blue-600: #427085;
    --aps-blue-700: #345A6B;
    --aps-blue-800: #243F4B;

    /* Blush White */
    --aps-blush-100: #FFFFFF;
    --aps-blush-200: #FEFBFC;
    --aps-blush-300: #F9F1F3;
    --aps-blush-400: #F3E7EB;
    --aps-blush-500: #FCF7F8;
    --aps-blush-600: #E9DDE1;
    --aps-blush-700: #D5C6CC;
    --aps-blush-800: #C0B0B8;

    /* Blue Charcoal */
    --aps-charcoal-100: #D9DEE6;
    --aps-charcoal-200: #B7C0CE;
    --aps-charcoal-300: #909DAF;
    --aps-charcoal-400: #647487;
    --aps-charcoal-500: #2C333F;
    --aps-charcoal-600: #232933;
    --aps-charcoal-700: #1A2028;
    --aps-charcoal-800: #11161D;

    /* Stone Gray */
    --aps-gray-100: #E5E5E5;
    --aps-gray-200: #D1D1D1;
    --aps-gray-300: #B7B7B7;
    --aps-gray-400: #9A9A9A;
    --aps-gray-500: #666666;
    --aps-gray-600: #555555;
    --aps-gray-700: #444444;
    --aps-gray-800: #333333;


    /* ---------------------------------------------------------
       SEMANTIC COLORS
       Components should generally use these rather than raw
       palette values.
       --------------------------------------------------------- */

    --aps-bg: var(--aps-blush-500);
    --aps-surface: #FFFFFF;
    --aps-surface-subtle: var(--aps-blush-300);

    --aps-text: var(--aps-charcoal-500);
    --aps-text-strong: var(--aps-charcoal-700);
    --aps-text-muted: var(--aps-gray-500);

    --aps-border: var(--aps-charcoal-100);
    --aps-border-strong: var(--aps-charcoal-200);

    --aps-link: var(--aps-blue-600);
    --aps-link-hover: var(--aps-blue-700);

    --aps-primary: var(--aps-blue-500);
    --aps-primary-hover: var(--aps-blue-700);
    --aps-primary-soft: var(--aps-blue-100);

    --aps-accent: var(--aps-red-500);
    --aps-accent-hover: var(--aps-red-600);
    --aps-accent-soft: var(--aps-red-100);


    /* ---------------------------------------------------------
       GEOMETRY
       --------------------------------------------------------- */

    --aps-radius-sm: 6px;
    --aps-radius-md: 10px;
    --aps-radius-lg: 14px;
    --aps-radius-pill: 999px;


    /* ---------------------------------------------------------
       SPACING
       --------------------------------------------------------- */

    --aps-space-1: 0.25rem;
    --aps-space-2: 0.5rem;
    --aps-space-3: 0.75rem;
    --aps-space-4: 1rem;
    --aps-space-5: 1.25rem;
    --aps-space-6: 1.5rem;
    --aps-space-8: 2rem;
    --aps-space-10: 2.5rem;
    --aps-space-12: 3rem;


    /* ---------------------------------------------------------
       TYPOGRAPHY
       --------------------------------------------------------- */

    --aps-font-sans:
        Arial,
        Helvetica,
        sans-serif;

    --aps-font-size-sm: 0.875rem;
    --aps-font-size-base: 1rem;
    --aps-font-size-lg: 1.125rem;
    --aps-font-size-xl: 1.375rem;
    --aps-font-size-2xl: 1.75rem;

    --aps-line-height: 1.5;


    /* ---------------------------------------------------------
       CONTROL SIZING
       --------------------------------------------------------- */

    --aps-control-height: 44px;


    /* ---------------------------------------------------------
       EFFECTS
       --------------------------------------------------------- */

    --aps-shadow-sm: 0 1px 2px rgb(17 22 29 / 0.08);
    --aps-shadow-md: 0 6px 18px rgb(17 22 29 / 0.08);
}