/**
 * Vastworx — L0 Primitives
 *
 * THIS IS THE ONLY FILE IN THE THEME PERMITTED TO CONTAIN A HEX VALUE,
 * A RAW FONT SIZE, A RAW RADIUS OR A RAW DURATION.
 *
 * theme.json references these via var(); components reference the presets.
 * A hex anywhere else fails CI. See README.md > Enforcement.
 *
 * Colour is declared as a ROLE, never as a hue. There is no --vw-blue and no
 * --vw-gray-300. Adding a colour means arguing that a new semantic role exists.
 *
 * :root carries the DARK set, so dark renders correctly with JS disabled,
 * with localStorage throwing, or before the head script runs.
 */

:root,
[data-theme="dark"] {
    color-scheme: dark;

    /* Backgrounds — the elevation ladder (see --vw-shadow-overlay below) */
    --vw-canvas:          #0A0C0F;
    --vw-surface:         #12161B;
    --vw-raised:          #1A1F26;
    --vw-overlay:         #222831;

    /* Lines, by contrast obligation */
    --vw-border:          #232A33;  /* decorative only — 1.35:1 */
    --vw-border-strong:   #39434F;  /* emphasis only  — 1.95:1 */
    --vw-border-control:  #5C6976;  /* interactive    — 3.23:1 on surface, WCAG 1.4.11 */

    /* Text, by hierarchy. ALL THREE meet 4.5:1 on every permitted background. */
    --vw-text-primary:    #E7ECF2;  /* 13.94:1 worst case */
    --vw-text-secondary:  #9BA6B2;  /*  6.70:1 */
    --vw-text-muted:      #7E8A96;  /*  4.70:1 — quiet, never inaccessible */

    /* Brand. Three roles because no single blue can be both readable AS text
       on near-black and carry a label ON it. --vw-accent is the FILL,
       --vw-accent-ink is what goes on top of that fill (5.32:1),
       --vw-accent-hover is the link/text blue (6.67:1). */
    --vw-accent:          #3B82F6;
    --vw-accent-hover:    #6BA5FF;
    --vw-accent-ink:      #0A0C0F;

    /* Focus is deliberately NOT an alias of accent: an accent-coloured ring
       vanishes on an accent fill. */
    --vw-focus:           #6BA5FF;

    /* Status */
    --vw-success:         #3DD68C;
    --vw-warning:         #E5A83B;
    --vw-danger:          #FF6B6B;
    --vw-success-bg:      #0E2A1E;
    --vw-warning-bg:      #2A2110;
    --vw-danger-bg:       #2E1416;

    /* Exactly ONE shadow exists, for elevation level 3 only. On a #0A0C0F
       canvas a black shadow has nothing to darken — depth is carried by
       surface lightness + border. An overlay is the sole exception, because
       it floats above arbitrary content. */
    --vw-shadow-overlay:
        0 8px 24px -4px rgb(0 0 0 / 0.55),
        0 2px  6px -2px rgb(0 0 0 / 0.40);
}

[data-theme="light"] {
    color-scheme: light;

    --vw-canvas:          #EEF1F5;  /* never pure white — that is what gives raised somewhere to go */
    --vw-surface:         #F8FAFC;
    --vw-raised:          #FFFFFF;
    --vw-overlay:         #FFFFFF;

    --vw-border:          #D7DDE5;
    --vw-border-strong:   #B8C2CE;
    --vw-border-control:  #7A8797;  /* 3.23:1 */

    --vw-text-primary:    #0D1117;  /* 16.70:1 */
    --vw-text-secondary:  #4A5563;  /*  6.69:1 */
    --vw-text-muted:      #616D7B;  /*  4.66:1 */

    /* Hover always means MORE contrast against its own background, so light
       mode goes darker, not lighter. This is directional, not a fixed transform. */
    --vw-accent:          #1A5FD0;  /* 5.16:1; white ink on it 5.85:1 */
    --vw-accent-hover:    #12489F;
    --vw-accent-ink:      #FFFFFF;

    --vw-focus:           #1A5FD0;

    --vw-success:         #0B7A50;
    --vw-warning:         #8A5A06;
    --vw-danger:          #C22B2B;
    --vw-success-bg:      #E6F4EC;
    --vw-warning-bg:      #FBF1DF;
    --vw-danger-bg:       #FBEAEA;

    --vw-shadow-overlay:
        0 8px 24px -4px rgb(16 24 40 / 0.12),
        0 2px  6px -2px rgb(16 24 40 / 0.08);
}

/* ---------------------------------------------------------------------------
   Non-colour primitives — mode-independent
   --------------------------------------------------------------------------- */

:root {
    /* Radii — exactly three, and every element belongs to exactly one row.
       4  buttons, inputs, badges, chips, tags, table cells, inline code
       8  cards, panels, code blocks, alerts, dropdowns, tooltips
       12 modals, hero media frames, diagram containers
       Nothing is a pill. Pills read consumer; 4px reads tooling. */
    --vw-radius-sm:  4px;
    --vw-radius-md:  8px;
    --vw-radius-lg:  12px;

    /* PERMITTED ON EXACTLY TWO COMPONENTS: .vw-status-dot, .vw-avatar.
       Any other use is a review failure — see the grep in README.md. */
    --vw-radius-full: 9999px;

    /* Motion. Ceiling is 240ms: for a product selling throughput, interface
       latency is a brand statement. */
    --vw-dur-fast:  120ms;
    --vw-dur-base:  180ms;
    --vw-dur-slow:  240ms;

    /* Three real curves. --vw-ease-out is the house curve: fast departure,
       long settle. If you don't know which to use, use it. */
    --vw-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
    --vw-ease-in:       cubic-bezier(0.4, 0, 1, 1);
    --vw-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

    /* Border — one width. Emphasis is carried by COLOUR, not weight. */
    --vw-border-width: 1px;

    /* Icon sizes — 16 / 20 / 24 only. */
    --vw-icon-sm: 16px;
    --vw-icon-md: 20px;
    --vw-icon-lg: 24px;

    /* Control heights */
    --vw-control-sm: 32px;
    --vw-control-md: 40px;
    --vw-control-lg: 48px;
}