/* vc/css/theme.css
   ===========================================================================
   TOKEN BRIDGE AND PALETTE
   ---------------------------------------------------------------------------
   Loaded BEFORE main.css, so every custom property exists before a component
   rule consumes it. This is the only file in the tree that contains a colour
   literal. No rule in main.css may hardcode a colour.

   Every --vc-* token resolves through a three level var() chain:

       1. the ODE spoke palette from ode/css/theme.css  (--bg-color, --panel-bg,
          --accent-color, and the rest of the Pillar 4 token set)
       2. the storefront palette from the root style.css (--color-bg,
          --color-surface, --color-primary, and so on)
       3. a literal

   In THIS tree the module stands alone. Neither campus stylesheet is loaded, so
   level three is the entire working palette rather than dead weight. The full
   chain is kept anyway: dropping this folder into a sibling position beside
   ode/ later makes the campus palette take over with no edit here, which turns
   a future move into a move rather than a rewrite.

   THREE STATE data-theme CONTRACT (blueprint Pillar 4)
   ---------------------------------------------------------------------------
     no data-theme attribute   the operating system decides, natively, with no
                               JavaScript, through the prefers-color-scheme
                               block below
     data-theme="light"        manual light. The :not() guard keeps the media
                               block away, so the :root base always wins
     data-theme="dark"         manual dark, regardless of the operating system

   The two dark blocks below carry IDENTICAL values and must stay in sync by
   hand. There is no preprocessor in a zero dependency tree.
   =========================================================================== */

:root {
    /* ------------------------------------------------------ surfaces ---- */
    --vc-bg:            var(--bg-color,       var(--color-bg,            #ffffff));
    --vc-text:          var(--text-color,     var(--color-text-main,     #1a1a1a));
    --vc-heading:       var(--text-color,     var(--color-text-heading,  #14141a));
    --vc-text-soft:     var(--text-secondary, var(--color-text-main,     #5c5c66));
    --vc-panel:         var(--panel-bg,       var(--color-surface,       #f4f4f4));
    --vc-panel-hover:   var(--panel-bg,       var(--color-surface-hover, #ebebf1));
    --vc-border:        var(--panel-border,   var(--color-border,        #dfdfe6));
    --vc-header:        var(--header-bg,      var(--color-surface,       #f4f4f4));
    --vc-shadow:        var(--shadow-color,   var(--color-shadow-strong, rgba(20, 20, 40, 0.14)));

    /* --------------------------------------------------------- roles ---- */
    --vc-accent:        var(--accent-color,   var(--color-primary,       #6200ee));
    --vc-accent-hover:  var(--accent-color,   var(--color-primary-hover, #7a00e6));
    --vc-accent-soft:   var(--accent-soft,    var(--color-surface-hover, #ece3f7));
    --vc-success:       var(--success-color,  var(--color-success,       #1b7a43));
    --vc-error:         var(--error-color,    var(--color-error,         #b3261e));
    --vc-muted:         var(--locked-color,   var(--color-border,        #9a9aa4));

    /* Two roles the campus palette does not define today. The level one and
       level two names are written anyway, so if the campus ever adds them this
       tree inherits them the same way it inherits everything else. Until then
       they resolve to the literal, which is the intended behaviour here. */
    --vc-principle:     var(--info-color,     var(--color-info,          #1d5fa8));
    --vc-warning:       var(--warning-color,  var(--color-warning,       #b26b00));

    /* ------------------------------------------------------- metrics ---- */
    --vc-font:          var(--font-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    --vc-space-sm:      var(--spacing-sm, 0.5rem);
    --vc-space-md:      var(--spacing-md, 1rem);
    --vc-space-lg:      var(--spacing-lg, 2rem);
    --vc-fast:          var(--transition-fast, 0.2s ease);

    /* Stylus ergonomics. Every interactive control resolves its minimum height
       from this one token, so the whole surface retunes in one edit. The
       acceptance floor is 44px and this sits above it deliberately. */
    --vc-hit:           48px;
    --vc-thumb:         28px;
}

/* Dark palette, branch one of two: no manual choice recorded, so the operating
   system decides. Excluded by the :not() guard the moment a light choice is
   stamped on the root element. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --vc-bg:            var(--bg-color,       var(--color-bg,            #121212));
        --vc-text:          var(--text-color,     var(--color-text-main,     #e0e0e0));
        --vc-heading:       var(--text-color,     var(--color-text-heading,  #ffffff));
        --vc-text-soft:     var(--text-secondary, var(--color-text-main,     #b0b8c1));
        --vc-panel:         var(--panel-bg,       var(--color-surface,       #1e1e1e));
        --vc-panel-hover:   var(--panel-bg,       var(--color-surface-hover, #2a2a2a));
        --vc-border:        var(--panel-border,   var(--color-border,        #333333));
        --vc-header:        var(--header-bg,      var(--color-surface,       #1e1e1e));
        --vc-shadow:        var(--shadow-color,   var(--color-shadow-strong, rgba(0, 0, 0, 0.5)));

        --vc-accent:        var(--accent-color,   var(--color-primary,       #bb86fc));
        --vc-accent-hover:  var(--accent-color,   var(--color-primary-hover, #9b30ff));
        --vc-accent-soft:   var(--accent-soft,    var(--color-surface-hover, #2d2140));
        --vc-success:       var(--success-color,  var(--color-success,       #34c27b));
        --vc-error:         var(--error-color,    var(--color-error,         #e05260));
        --vc-muted:         var(--locked-color,   var(--color-border,        #4a4a52));

        --vc-principle:     var(--info-color,     var(--color-info,          #6ea8fe));
        --vc-warning:       var(--warning-color,  var(--color-warning,       #e0a33e));
    }
}

/* Dark palette, branch two of two: an explicit manual choice. Identical values
   to the block above. Keep the two in sync. */
:root[data-theme="dark"] {
    --vc-bg:            var(--bg-color,       var(--color-bg,            #121212));
    --vc-text:          var(--text-color,     var(--color-text-main,     #e0e0e0));
    --vc-heading:       var(--text-color,     var(--color-text-heading,  #ffffff));
    --vc-text-soft:     var(--text-secondary, var(--color-text-main,     #b0b8c1));
    --vc-panel:         var(--panel-bg,       var(--color-surface,       #1e1e1e));
    --vc-panel-hover:   var(--panel-bg,       var(--color-surface-hover, #2a2a2a));
    --vc-border:        var(--panel-border,   var(--color-border,        #333333));
    --vc-header:        var(--header-bg,      var(--color-surface,       #1e1e1e));
    --vc-shadow:        var(--shadow-color,   var(--color-shadow-strong, rgba(0, 0, 0, 0.5)));

    --vc-accent:        var(--accent-color,   var(--color-primary,       #bb86fc));
    --vc-accent-hover:  var(--accent-color,   var(--color-primary-hover, #9b30ff));
    --vc-accent-soft:   var(--accent-soft,    var(--color-surface-hover, #2d2140));
    --vc-success:       var(--success-color,  var(--color-success,       #34c27b));
    --vc-error:         var(--error-color,    var(--color-error,         #e05260));
    --vc-muted:         var(--locked-color,   var(--color-border,        #4a4a52));

    --vc-principle:     var(--info-color,     var(--color-info,          #6ea8fe));
    --vc-warning:       var(--warning-color,  var(--color-warning,       #e0a33e));
}