/*
 * ROD Communications Inc. — assets/css/tokens.css
 *
 * CSS Custom Properties — Design System
 * Source: tailwind.config.js (colors, fonts, border-radius)
 *
 * These variables are referenced throughout style.css.
 * Do not add component styles here.
 */

:root {

    /* ── Colors ──────────────────────────────────────────────────────────── */
    --color-primary:                   #0059c7;
    --color-primary-fixed:             #004299;
    --color-primary-fixed-dim:         #0059c7;
    --color-primary-container:         #0059c7;
    --color-on-primary:                #ffffff;
    --color-on-primary-fixed:          #d9e2ff;
    --color-on-primary-fixed-variant:  #afc6ff;
    --color-on-primary-container:      #ffffff;
    --color-inverse-primary:           #afc6ff;

    --color-secondary:                 #994f00;
    --color-secondary-container:       #fd8b00;
    --color-secondary-fixed:           #311100;
    --color-secondary-fixed-dim:       #6e3900;
    --color-on-secondary:              #ffffff;
    --color-on-secondary-container:    #ffffff;
    --color-on-secondary-fixed:        #ffb77d;
    --color-on-secondary-fixed-variant:#ffdcc3;

    --color-tertiary:                  #5d5e5e;
    --color-tertiary-container:        #f0f0f0;
    --color-tertiary-fixed:            #292a2a;
    --color-tertiary-fixed-dim:        #464747;
    --color-on-tertiary:               #ffffff;
    --color-on-tertiary-container:     #f0f0f0;
    --color-on-tertiary-fixed:         #ffffff;
    --color-on-tertiary-fixed-variant: #c7c6c6;

    --color-background:                #ffffff;
    --color-on-background:             #1a1c1e;

    --color-surface:                   #ffffff;
    --color-surface-dim:               #f8f9ff;
    --color-surface-bright:            #ffffff;
    --color-surface-variant:           #dee2f1;
    --color-surface-tint:              #0059c7;
    --color-surface-container-lowest:  #ffffff;
    --color-surface-container-low:     #f7f9ff;
    --color-surface-container:         #f1f4f9;
    --color-surface-container-high:    #ebeef4;
    --color-surface-container-highest: #e1e2e8;
    --color-on-surface:                #1a1c1e;
    --color-on-surface-variant:        #43474e;
    --color-inverse-surface:           #2f3033;
    --color-inverse-on-surface:        #f1f0f4;

    --color-outline:                   #737785;
    --color-outline-variant:           #c2c6d7;

    --color-error:                     #ba1a1a;
    --color-error-container:           #ffdad6;
    --color-on-error:                  #ffffff;
    --color-on-error-container:        #410002;

    /* ── Typography ──────────────────────────────────────────────────────── */
    --font-headline: 'Inter', sans-serif;
    --font-body:     'Inter', sans-serif;
    --font-label:    'Work Sans', sans-serif;

    /* ── Border Radius ───────────────────────────────────────────────────── */
    --radius:      0.125rem;  /* default — industrial flat */
    --radius-lg:   0.25rem;
    --radius-xl:   0.5rem;
    --radius-2xl:  0.75rem;   /* matches rounded-full in tailwind config */
    --radius-full: 9999px;    /* true pill / circle */

    /* ── Spacing (matches standard Tailwind spacing scale) ───────────────── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* ── Z-index scale ───────────────────────────────────────────────────── */
    --z-nav:     50;
    --z-menu:    40;
    --z-content: 10;
    --z-base:    1;

    /* ── Shadows ─────────────────────────────────────────────────────────── */
    --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    /* ── Transitions ─────────────────────────────────────────────────────── */
    --transition-base:   all 150ms ease-in-out;
    --transition-slow:   all 300ms ease-in-out;
    --transition-reveal: all 1000ms cubic-bezier(0, 0, 0.2, 1);

    /* ── Nav metrics — used for spacer and fixed positioning ─────────────── */
    --nav-height-mobile:  62px;   /* py-3 + content height on mobile */
    --nav-height-desktop: 74px;   /* py-4 + content height on desktop */

    /* ── Max content width ───────────────────────────────────────────────── */
    --max-w-content: 80rem;   /* max-w-7xl = 1280px */
}