/**
 * Theme Bridge
 *
 * The ONLY file that declares --kern-* variables. All other files use only
 * the user-facing interface below or @apply Tailwind utilities.
 *
 * ─────────────────────────────────────────────────────────────────
 * USER-FACING INTERFACE (set these in your theme file)
 * ─────────────────────────────────────────────────────────────────
 *
 * Colors (Shadcn naming):
 *   --primary / --primary-foreground
 *   --background / --foreground
 *   --muted / --muted-foreground
 *   --border
 *   --accent / --accent-foreground
 *   --destructive / --success / --warning / --info
 *   --sidebar-background    (optional)
 *   --footer-background     (optional)
 *   --footer-foreground     (optional, defaults to --foreground)
 *   --input                 (optional, input background color, defaults to --background)
 *   --searchbar-border      (optional, search dropdown border, defaults to --border)
 *   --searchbar-background  (optional, search dropdown background, defaults to --background)
 *
 * Shape:
 *   --radius                (max border-radius; smaller steps derived from kern tokens)
 *
 * Spacing:
 *   --spacing-base          (base unit; all kern metric space tokens are multiples)
 *
 * Typography:
 *   --font-family           (font stack string)
 *   --font-size-ratio       (modular scale ratio, default 1.13)
 *   --font-weight-heading   (font-weight for headings)
 *
 * ─────────────────────────────────────────────────────────────────
 * NOT inside @layer base — kern.min.css sets --kern-* as unlayered styles,
 * so we must also be unlayered to correctly override them.
 * ─────────────────────────────────────────────────────────────────
 */

:root {

    /* ================================================================ */
    /* Defaults — kern's own tokens as fallbacks                         */
    /* ================================================================ */

    --radius:              var(--kern-8);                               /* 0.5rem / 8px  */
    --spacing-base:        var(--kern-4);                               /* 0.25rem / 4px */
    --font-family:         var(--kern-typography-font-family-fira-sans);
    --font-size-ratio:     1.13;
    --font-weight-heading: 700;

    /* ================================================================ */
    /* Color defaults — kern's own built-in values                      */
    /* Override these in your theme file to customize.                  */
    /* ================================================================ */

    --primary:            #1A3DA5;
    --primary-foreground: #ffffff;
    --background:         #ffffff;
    --foreground:         #171A2B;
    --muted:              #F7F7F9;
    --muted-foreground:   #404565;
    --border:             #A5AAC3;
    --accent:             #1A3DA5;
    --accent-foreground:  #ffffff;
    --destructive:        #BD0F09;
    --success:            #006B51;
    --warning:            #8A4F00;
    --info:               #006490;

    /* ================================================================ */
    /* Color bridge                                                      */
    /* ================================================================ */

    --kern-color-action-default:               var(--primary);
    --action-default:                          var(--primary);
    --kern-color-action-on-default:            var(--primary-foreground);
    --kern-color-action-state-indicator-shade-hover: color-mix(in oklch, var(--primary), black 15%);
    --kern-color-layout-background-default:    var(--background);
    --kern-color-layout-background-hued:       var(--muted);
    --kern-color-layout-text-default:          var(--foreground);
    --kern-color-layout-text-muted:            var(--muted-foreground);
    --kern-color-layout-border:                var(--border);
    --kern-color-form-input-background:        var(--input, var(--background));

    --kern-color-feedback-danger:              var(--destructive);
    --kern-color-feedback-danger-background:   color-mix(in oklch, var(--destructive), white 85%);
    --kern-color-feedback-success:             var(--success);
    --kern-color-feedback-success-background:  color-mix(in oklch, var(--success), white 85%);
    --kern-color-feedback-warning:             var(--warning);
    --kern-color-feedback-warning-background:  color-mix(in oklch, var(--warning), white 85%);
    --kern-color-feedback-info:                var(--info);
    --kern-color-feedback-info-background:     color-mix(in oklch, var(--info), white 85%);

    /* Surface aliases */
    --footer-color-background:      var(--footer-background, var(--muted));
    --footer-color-foreground:      var(--footer-foreground, var(--foreground));
    --sidebar-color-background:     var(--sidebar-background, transparent);
    --sidebar-color-border:         var(--border);
    --toc-color-background:         var(--sidebar-background, transparent);
    --searchbar-color-border:       var(--searchbar-border, var(--border));
    --searchbar-color-background:   var(--searchbar-background, var(--background));


    /* ================================================================ */
    /* Shape bridge                                                      */
    /* Entire scale derived from --radius so setting --radius: 0px      */
    /* makes all steps sharp (Shadcn approach).                         */
    /* ================================================================ */

    --kern-metric-border-radius-large:  calc(var(--radius) + 2px);
    --kern-metric-border-radius-medium:  calc(var(--radius));
    --kern-metric-border-radius-small:   calc(var(--radius) - 2px);
    --kern-metric-border-radius-default: calc(var(--radius));


    /* ================================================================ */
    /* Spacing bridge                                                    */
    /* ================================================================ */

    --kern-metric-space-2x-small: var(--spacing-base);
    --kern-metric-space-x-small:  calc(var(--spacing-base) * 2);
    --kern-metric-space-small:    calc(var(--spacing-base) * 3);
    --kern-metric-space-default:  calc(var(--spacing-base) * 4);
    --kern-metric-space-large:    calc(var(--spacing-base) * 6);
    --kern-metric-space-x-large:  calc(var(--spacing-base) * 8);


    /* ================================================================ */
    /* Typography bridge                                                 */
    /* Private --_t-* variables chain the modular scale; only the       */
    /* --kern-typography-* mappings are the external interface.         */
    /* ================================================================ */

    /* Private type scale (not --semantic-*, not user-facing) */
    --_t-sm:  calc(1rem * var(--font-size-ratio));
    --_t-md:  calc(var(--_t-sm)  * var(--font-size-ratio));
    --_t-lg:  calc(var(--_t-md)  * var(--font-size-ratio));
    --_t-xl:  calc(var(--_t-lg)  * var(--font-size-ratio));
    --_t-2xl: calc(var(--_t-xl)  * var(--font-size-ratio));
    --_t-3xl: calc(var(--_t-2xl) * var(--font-size-ratio));
    --_t-4xl: calc(var(--_t-3xl) * var(--font-size-ratio));

    /* Kern font family & weight */
    --kern-typography-font-family-default:   var(--font-family);
    --kern-typography-font-weight-medium:    var(--font-weight-heading);
    --kern-typography-font-weight-semi-bold: var(--font-weight-heading);

    /* Kern font size mappings */
    --kern-typography-font-size-static-medium:     var(--_t-sm);
    --kern-typography-font-size-adaptive-medium:   var(--_t-sm);
    --kern-typography-font-size-adaptive-large:    var(--_t-lg);
    --kern-typography-font-size-adaptive-x-large:  var(--_t-3xl);
    --kern-typography-font-size-adaptive-2x-large: var(--_t-4xl);

    /* Kern line height mappings */
    --kern-typography-line-height-static-medium:      150%;
    --kern-typography-line-height-adaptive-large:     125%;
    --kern-typography-line-height-adaptive-x-large:   125%;
    --kern-typography-line-height-adaptive-2x-large:  125%;

    /* Border widths */
    --kern-metric-border-width-default: 1px;
    --kern-metric-border-width-bold:    1px;
}

/* Responsive ratio — larger screens use a slightly bigger scale by default */
@media (width >= 1200px) {
    :root {
        --font-size-ratio: 1.2;
    }
}

/* Dark mode — align with kern.min.css: use 900-step palette for backgrounds, 400-step for foreground */
[data-kern-theme="dark"] {
    --kern-color-feedback-danger:             oklch(var(--kern-red-400-lightness)        var(--kern-red-400-chroma)        var(--kern-red-400-hue));
    --kern-color-feedback-danger-background:  oklch(var(--kern-red-900-lightness)        var(--kern-red-900-chroma)        var(--kern-red-900-hue));
    --kern-color-feedback-info:               oklch(var(--kern-lightblue-400-lightness)  var(--kern-lightblue-400-chroma)  var(--kern-lightblue-400-hue));
    --kern-color-feedback-info-background:    oklch(var(--kern-lightblue-900-lightness)  var(--kern-lightblue-900-chroma)  var(--kern-lightblue-900-hue));
    --kern-color-feedback-success:            oklch(var(--kern-turquoise-400-lightness)  var(--kern-turquoise-400-chroma)  var(--kern-turquoise-400-hue));
    --kern-color-feedback-success-background: oklch(var(--kern-turquoise-900-lightness)  var(--kern-turquoise-900-chroma)  var(--kern-turquoise-900-hue));
    --kern-color-feedback-warning:            oklch(var(--kern-orange-400-lightness)     var(--kern-orange-400-chroma)     var(--kern-orange-400-hue));
    --kern-color-feedback-warning-background: oklch(var(--kern-orange-900-lightness)     var(--kern-orange-900-chroma)     var(--kern-orange-900-hue));
}
