/*
 * SK PRO — Design Tokens (conversion Tailwind → CSS custom properties)
 * Système "Architectural Editorial" — Deep Navy + Vibrant Orange
 */

:root {
    /* ===== COULEURS PRINCIPALES ===== */
    --color-primary:              #041627;   /* Deep Navy — autorité, confiance */
    --color-primary-container:    #1a2b3c;   /* Navy légèrement plus clair */
    --color-on-primary:           #ffffff;

    --color-secondary:            #8a5100;   /* Orange sombre — CTA principal */
    --color-secondary-vivid:      #F39200;   /* Orange vif — accents, badges */
    --color-secondary-container:  #fc9910;   /* Orange container */
    --color-on-secondary:         #ffffff;
    --color-on-secondary-container: #643900;

    /* ===== SURFACES (système tonal) ===== */
    --color-background:               #fcf9f8;   /* "Fine paper" warm off-white */
    --color-surface:                  #fcf9f8;
    --color-surface-bright:           #fcf9f8;
    --color-surface-dim:              #dcd9d9;
    --color-surface-tint:             #4f6073;

    --color-surface-container-lowest:  #ffffff;
    --color-surface-container-low:     #f6f3f2;
    --color-surface-container:         #f0eded;
    --color-surface-container-high:    #eae7e7;
    --color-surface-container-highest: #e5e2e1;

    /* ===== TEXTES ===== */
    --color-on-surface:          #1b1c1c;   /* Near-black, plus doux que #000 */
    --color-on-surface-variant:  #44474c;   /* Gris secondaire */
    --color-on-background:       #1b1c1c;

    /* ===== OUTLINE ===== */
    --color-outline:         #74777d;
    --color-outline-variant: #c4c6cd;

    /* ===== ERREURS ===== */
    --color-error:           #ba1a1a;
    --color-error-container: #ffdad6;

    /* ===== DARK VARIATIONS ===== */
    --color-tertiary:            #061723;
    --color-tertiary-container:  #1b2b39;
    --color-inverse-surface:     #303030;
    --color-inverse-on-surface:  #f3f0ef;
    --color-inverse-primary:     #b7c8de;

    /* ===== BORDER RADIUS ===== */
    --radius-xs:   0.25rem;   /* 4px — défaut */
    --radius-sm:   0.5rem;    /* 8px */
    --radius-md:   0.75rem;   /* 12px — boutons */
    --radius-lg:   1rem;      /* 16px — cards */
    --radius-xl:   1.5rem;    /* 24px */
    --radius-2xl:  2rem;      /* 32px */
    --radius-3xl:  3rem;      /* 48px — grandes cards */
    --radius-full: 9999px;    /* Pillules / cercles */

    /* ===== OMBRES ===== */
    /* Règle : Haute diffusion, faible opacité — jamais de drop shadow classique */
    --shadow-editorial: 0 30px 60px -12px rgba(27, 28, 28, 0.08);
    --shadow-ambient:   0 8px 30px rgba(27, 28, 28, 0.08);
    --shadow-card:      0 4px 20px rgba(27, 28, 28, 0.06);

    /* ===== TYPOGRAPHIE ===== */
    --font-family: 'Public Sans', system-ui, -apple-system, sans-serif;

    /* ===== TRANSITIONS ===== */
    --transition-fast:   150ms ease;
    --transition-normal: 200ms ease;
    --transition-slow:   300ms ease;

    /* ===== Z-INDEX ===== */
    --z-header:  50;
    --z-overlay: 100;

    /* ===== ESPACEMENTS ===== */
    --spacing-section: 8rem;   /* py-32 = 128px */
    --max-width:        80rem; /* max-w-7xl */
}