/*
 * Yargo Design System Foundation
 * Phase 1: declarations only. This file is intentionally not loaded by any page yet.
 * Prefix is kept as --yargo- to avoid collisions with Bootstrap --bs-* variables.
 */

:root {
    /* Color: brand */
    --yargo-color-brand-primary: #167A3F;
    --yargo-color-brand-hover: #126735;
    --yargo-color-brand-active: #0D512A;
    --yargo-color-brand-soft: #EAF7EE;

    /* Color: surfaces */
    --yargo-color-background: #F7F9F8;
    --yargo-color-surface: #FFFFFF;
    --yargo-color-surface-hover: #F1F6F3;

    /* Color: text and borders */
    --yargo-color-text-primary: #16211A;
    --yargo-color-text-secondary: #445148;
    --yargo-color-text-muted: #66736A;
    --yargo-color-border: #D5DDD7;
    --yargo-color-border-strong: #95A39A;

    /* Color: semantic feedback */
    --yargo-color-success: #1F7A4D;
    --yargo-color-warning: #9A6700;
    --yargo-color-danger: #B42318;
    --yargo-color-focus-ring: rgba(22, 122, 63, 0.32);

    /* Typography */
    --yargo-font-family-sans: Arial, Helvetica, sans-serif;
    --yargo-font-size-xs: 0.75rem;
    --yargo-font-size-sm: 0.875rem;
    --yargo-font-size-md: 1rem;
    --yargo-font-size-lg: 1.125rem;
    --yargo-font-size-xl: 1.25rem;
    --yargo-font-size-heading-sm: 1.25rem;
    --yargo-font-size-heading-md: 1.5rem;
    --yargo-font-size-heading-lg: 2rem;
    --yargo-font-weight-regular: 400;
    --yargo-font-weight-medium: 500;
    --yargo-font-weight-semibold: 600;
    --yargo-font-weight-bold: 700;
    --yargo-line-height-tight: 1.25;
    --yargo-line-height-normal: 1.5;
    --yargo-line-height-relaxed: 1.625;

    /* Spacing */
    --yargo-space-0: 0;
    --yargo-space-1: 0.25rem;
    --yargo-space-2: 0.5rem;
    --yargo-space-3: 0.75rem;
    --yargo-space-4: 1rem;
    --yargo-space-6: 1.5rem;
    --yargo-space-8: 2rem;

    /* Shape and elevation */
    --yargo-radius-sm: 0.25rem;
    --yargo-radius-md: 0.5rem;
    --yargo-radius-lg: 0.75rem;
    --yargo-shadow-sm: 0 1px 2px rgba(22, 33, 26, 0.08);
    --yargo-shadow-md: 0 4px 12px rgba(22, 33, 26, 0.12);
    --yargo-shadow-lg: 0 12px 24px rgba(22, 33, 26, 0.16);
    --yargo-shadow-focus: 0 0 0 3px var(--yargo-color-focus-ring);

    /* Layout candidates: declared only; do not replace existing CSS or JS calculations yet. */
    --yargo-layout-header-height: 4rem;
    --yargo-layout-sidebar-width: 15rem;
    --yargo-layout-content-space: 1.5rem;
    --yargo-layout-content-space-mobile: 1rem;

    /* Layering candidates: declared only; do not replace existing z-index values yet. */
    --yargo-z-header: 100;
    --yargo-z-sidebar: 200;
    --yargo-z-dropdown: 300;
    --yargo-z-overlay: 800;
    --yargo-z-modal: 900;
}

/* Larger type on phones and tablets, including landscape tablets. */
@media (max-width: 1280px) {
    :root {
        --yargo-font-size-xs: 1rem;
        --yargo-font-size-sm: 1.125rem;
        --yargo-font-size-md: 1.125rem;
        --yargo-font-size-lg: 1.25rem;
        --yargo-font-size-xl: 1.375rem;
        --yargo-font-size-heading-sm: 1.5rem;
        --yargo-font-size-heading-md: 1.75rem;
        --yargo-font-size-heading-lg: 2.125rem;
        --yargo-line-height-normal: 1.6;
    }
}