/**
 * SGC Design Tokens — single source of truth for both sgc_web and api-server.
 *
 * Loaded globally on every front-end page via inc/asset-enqueue.php.
 * No rules in this file — only :root variables. Anything here overrides
 * per-feature CSS that defines its own copies.
 */

:root {
    /* === Brand palette === */
    --sgc-deep:    #065066;
    --sgc-deep-2:  #00364a;
    --sgc-teal:    #4692a6;
    --sgc-maya:    #9abbc7;
    --sgc-teal-text: #2e7d91; /* AA-passing teal for body links on white (5.2:1) */

    /* === Surfaces === */
    --surface:        #ffffff;
    --surface-bg:     #f9fafb;
    --surface-hover:  #f8fafc;
    --surface-muted:  #EAECF4;
    --accent-light:   rgba(6, 80, 102, 0.08);

    /* === Text === */
    --text-primary:   #1a1a1a;
    --text-secondary: #64748b; /* AA-passing muted body (5.0:1) */
    --text-tertiary:  #475569; /* darker than the old #94a3b8 — meets AA for small text */
    --text-on-dark:   rgba(255, 255, 255, 0.92);

    /* === Borders === */
    --border:       #e7e6e7;
    --border-light: rgba(0, 0, 0, 0.06);

    /* === Status === */
    --color-success: #16a34a;
    --color-warning: #b45309;
    --color-error:   #b91c1c;
    --color-info:    #2271b1;

    /* === Type scale === */
    --font-sans:  'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono:  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --text-xs:   0.75rem;   /* 12px */
    --text-sm:   0.875rem;  /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg:   1.125rem;  /* 18px */
    --text-xl:   1.25rem;   /* 20px */
    --text-2xl:  1.5rem;    /* 24px */
    --text-3xl:  1.875rem;  /* 30px */
    --text-4xl:  2.5rem;    /* 40px */

    /* === Weights === */
    --weight-normal:   400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* === Tracking === */
    --tracking-tight:  -0.02em;
    --tracking-normal: 0;
    --tracking-wide:   0.06em;  /* uppercase labels */
    --tracking-wider:  0.12em;  /* button caps */
    --tracking-eyebrow: 0.24em; /* eyebrow component */

    /* === Spacing === */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  24px;
    --space-6:  32px;
    --space-7:  48px;
    --space-8:  64px;
    --space-9:  96px;
    --space-10: 128px;

    /* === Radius === */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* === Motion === */
    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --sgc-transition: var(--transition); /* legacy alias for files still using --sgc-transition */
    --transition-slow: 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);

    /* === Shadows === */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-card:       0 2px 8px rgba(6, 80, 102, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-card-hover: 0 12px 32px rgba(6, 80, 102, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-btn:       0 2px 10px rgba(6, 80, 102, 0.22);
    --shadow-btn-hover: 0 6px 18px rgba(6, 80, 102, 0.32);
    --shadow-glass:       0 8px 24px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    --shadow-glass-hover: 0 12px 28px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.40);

    /* === Focus ring === */
    --focus-ring: 0 0 0 3px rgba(154, 187, 199, 0.7);
}