/*++++++++++++++++++++++++++++*/
/* openCode Theme Definitions */
/*++++++++++++++++++++++++++++*/

@import "../../styles.css";
@import "./open-sans.css";
@import "./space-grotesk.css";



/* ==========================================================================
   VAR OVERRIDE
   These are the only variables you need to set to fully customize this theme.
   All values flow through theme-bridge.css into kern's internal token system.
   ========================================================================== */
:root {
    /* --- Colors --- */
    --primary:            #1544ff;
    --primary-foreground: #ffffff;
    --background:         #ffffff;
    --foreground:         #131f30;
    --muted:              #f8faff;
    --muted-foreground:   #4d5b79;  
    --border:             #c3d4f5;
    --accent:             #1544ff;
    --accent-foreground:  #ffffff;
    --destructive:        #f34458;
    --success:            #64a183;
    --warning:            #eb702e;
    --info:               #618ce6;
    --sidebar-background: #e9edff;
    --sidebar-border:     #d9dbdf;
    --footer-background:  #f0f1f3;
    --card:               #111E60;

    /* --- Shape --- */
    --radius: 6px;

    /* --- Spacing --- */
    --spacing-base: 4px;

    /* --- Typography --- */
    --font-family:         "Open Sans", sans-serif;
    --font-size-ratio:     1.1;
    --font-weight-heading: 700;
    --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --link-color:                         #1544ff;
    --sidebar-accent-foreground:          #1544ff;
    --sidebar-accent:                     transparent;

    --secondary: black;
    --secondary-foreground: white;
    --toc-color-background: #f8faff;

    /* Searchbar */
    --searchbar-border:     #c3d4f5;
    --searchbar-background: #f8faff;
}

[data-kern-theme="dark"] {
    --primary:            #88a0ff;
    --primary-foreground: #001154;
    --background:         #001154;
    --foreground:         #f0f1f3;
    --muted:              #0a1d75;
    --muted-foreground:   #b6bcc8;
    --border:             rgb(136, 160, 255);
    --sidebar-background:  #001154;
    --sidebar-border:    rgb(136, 160, 255);
    --footer-background:   #22335A;
    --input:               #ffffff;
    --input-foreground:    #111E60;
    --info:                #88a0ff;
    --card:                #111E60;
    --link-color:          #41E6CC;
    --sidebar-accent-foreground:          #41E6CC;
    
    --accent:             #00E6CC;
    --accent-foreground:  #004039;
    --secondary: white;
    --secondary-foreground: black;
    --toc-color-background: transparent;

    /* Searchbar */
    --searchbar-border:     rgb(136, 160, 255);
    --searchbar-background: #0a1d75;
}

.kern-btn--secondary {
    background-color: var(--secondary) !important;
    color: var(--secondary-foreground) !important;
    @apply rounded-md
}

.kern-btn--secondary .kern-label {
    color: var(--secondary-foreground) !important;
}

.kern-btn--tertiary {
    @apply hover:bg-transparent! p-0!;
}
.kern-btn--tertiary:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

.kern-link {
    color: var(--link-color) !important;
    padding: 0;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.content-wrapper {
    max-width: 1600px;
    margin: auto;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    @apply font-display!;
}

div > nav > div > span {
    @apply font-display!;
}

/* ==========================================================================
   Tables
   ========================================================================== */

table {
    table-layout: auto;
}

th, td {
    word-break: normal;
    overflow-wrap: normal;
    hyphens: manual;
}

/* ==========================================================================
   Sidebar
   ========================================================================== */

a[data-sidebar="menu-button"],
button[data-sidebar="menu-button"] {
    background-color: var(--sidebar-background, transparent);
}

#sidebar {
    @apply rounded-lg border ml-xl;
    margin-top: var(--kern-metric-space-x-large);
    background-color: var(--sidebar-background, transparent);
}

#sidebar button,
#sidebar a {
    background-color: var(--sidebar-background, transparent) !important;
    text-decoration: none !important;
    color: var(--foreground) !important;
}

#sidebar a[data-active="true"] {
    color: var(--link-color) !important;
}

[data-kern-theme="dark"] #sidebar {
    border: none!important;
}

#primary-menu-title {
    @apply pb-xs pl-xs;
}

svg[id="chevrondown-menu"] {
    stroke: var(--primary);
}

/* ==========================================================================
   TOC
   ========================================================================== */

nav[id="toc"] > div > div > div > ul > li > a {
    @apply text-sm!;
    text-decoration: none !important;
    color: var(--foreground) !important;
}

nav > div > div > div > ul > li > a[data-active="true"] {
    color: var(--link-color) !important;
}

nav > div > div > div > ul > li > a:hover {
    color: var(--link-color) !important;
    transition: all 0.2s ease-in-out;
}

#sidebar a:hover {
    color: var(--link-color) !important;
}

@layer utilities {
    nav > div > div > div > ul > li > a.\!pl-2 { padding-left: 0px !important; }
    nav > div > div > div > ul > li > a.\!pl-4 { padding-left: 0px !important; }
    nav > div > div > div > ul > li > a.\!pl-6 { padding-left: 0px !important; }
    nav > div > div > div > ul > li > a.\!pl-8 { padding-left: 0px !important; }
}

#toc-inner {
    @apply rounded-lg;
    background-color: var(--toc-color-background);
}


#toc-inner {
    @apply p-lg;
}


/* ==========================================================================
   Nav header
   ========================================================================== */

span[id="nav-to-opencode"] {
    display: inline !important;
    color: var(--primary);
    font-weight: 600;
}

[data-kern-theme="dark"] span[id="nav-to-opencode"] {
    color: white;
}

a[id="nav-to-opencode"] {
    @apply rounded-md !text-sm w-auto border;
}

a[id="nav-to-opencode"] > div[id="nav-to-opencode"] {
    padding: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    gap: calc(var(--spacing) * 2);
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer {
    color: var(--foreground);
}

footer .kern-link {
    @apply text-sm!;
}

/* ==========================================================================
   Kern components
   ========================================================================== */

.kern-btn--primary[disabled] {
    cursor: not-allowed !important;
}

.kern-form-input__input {
    @apply rounded-sm !text-sm;
    border-bottom: none !important;
    border: 1px solid var(--border) !important;
}

.kern-alert__body {
    @apply pt-0 px-xl pb-lg bg-muted;
    border-radius: 3px;
}

.kern-alert__header {
    @apply pt-lg px-lg pb-md;
}

.kern-card--small .kern-card__container {
    /* 20px = spacing-base * 5, no exact Tailwind step */
    padding: calc(var(--spacing-base) * 5);
}

.kern-card {
    @apply rounded-md;
}

.kern-card__media {
    padding: calc(var(--spacing-base) * 5);
}

.kern-card__media img {
    @apply rounded-md;
}
