/* ============================================================
   OpiDev Skin — Design Tokens
   The single source of truth for colour, spacing, type and
   layout. Everything in skin.css references these variables.
   Cookie-free, self-hosted, no external dependencies.
   ============================================================ */

:root {
    /* ---- Brand ---- */
    --opi-brand:            #0a66c2;   /* primary accent  */
    --opi-brand-hover:      #084e95;
    --opi-brand-contrast:   #ffffff;   /* text on brand   */
    --opi-accent:           #16a34a;   /* secondary accent */

    /* ---- Surfaces (light is the default theme) ---- */
    --opi-bg:               #ffffff;   /* page background  */
    --opi-surface:          #ffffff;   /* cards / panes    */
    --opi-surface-alt:      #f5f7fa;   /* subtle sections  */
    --opi-surface-sunken:   #eef1f5;   /* header/footer band */

    /* ---- Text ---- */
    --opi-text:             #1a2230;   /* body text        */
    --opi-text-muted:       #5a6678;   /* secondary text   */
    --opi-text-invert:      #f5f7fa;   /* text on dark band */
    --opi-heading:          #0f1722;

    /* ---- Lines & shadow ---- */
    --opi-border:           #e2e8f0;
    --opi-border-strong:    #cbd5e1;
    --opi-shadow-sm:        0 1px 2px rgba(16,23,34,.06), 0 1px 3px rgba(16,23,34,.08);
    --opi-shadow-md:        0 4px 12px rgba(16,23,34,.08), 0 2px 4px rgba(16,23,34,.06);
    --opi-shadow-lg:        0 12px 32px rgba(16,23,34,.12);

    /* ---- Radius ---- */
    --opi-radius-sm:        6px;
    --opi-radius:           10px;
    --opi-radius-lg:        16px;

    /* ---- Spacing scale (rem) ---- */
    --opi-space-1: .25rem;
    --opi-space-2: .5rem;
    --opi-space-3: .75rem;
    --opi-space-4: 1rem;
    --opi-space-5: 1.5rem;
    --opi-space-6: 2rem;
    --opi-space-7: 3rem;
    --opi-space-8: 4rem;

    /* ---- Layout ---- */
    --opi-container:        1200px;    /* max content width */
    --opi-gap:              1.5rem;     /* grid gap          */
    --opi-header-h:         72px;

    /* ---- Type (fluid) ---- */
    --opi-font-body: "Open Sans", -apple-system, BlinkMacSystemFont,
                     "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --opi-font-head: var(--opi-font-body);

    --opi-fs-base:  clamp(1rem, .96rem + .2vw, 1.0625rem);
    --opi-fs-sm:    .875rem;
    --opi-fs-lg:    clamp(1.125rem, 1.05rem + .4vw, 1.25rem);
    --opi-fs-h1:    clamp(1.9rem, 1.5rem + 2vw, 2.85rem);
    --opi-fs-h2:    clamp(1.55rem, 1.3rem + 1.3vw, 2.15rem);
    --opi-fs-h3:    clamp(1.3rem, 1.15rem + .7vw, 1.6rem);
    --opi-lh:       1.65;
    --opi-lh-head:  1.2;

    /* ---- Motion ---- */
    --opi-ease:     cubic-bezier(.4, 0, .2, 1);
    --opi-dur:      .25s;

    /* ---- Breakpoints (reference only; used in media queries) ---- */
    /* sm 576 · md 768 · lg 992 · xl 1200 */

    color-scheme: light;
}