/* Copyright 2026 i8i.io | Palette.css */
/* The palette page and every part it shows, their tokens and their structure */
/* System: CSS | Part: Palette */
/* Version: 1.0.C6J10 */







/* =============================================================== */
/*                              TOKENS                             */
/* =============================================================== */

/* What the palette page's parts style from - the page's shared values, then each part's own */
.i8iPalette {

    /* ....... Shared ....... */

    /* ... Text ... */
    --i8i-Palette-Text-SmallSize:   var(--i8i-FontSize-014);
    --i8i-Palette-Text-SmallWeight: var(--i8i-FontWeight-400);

    /* ... Space ... */
    --i8i-Palette-Space-InlineSize:   min(100%, var(--i8i-MaxWidth-1200));
    --i8i-Palette-Space-Padding:      var(--i8i-Padding-024);
    --i8i-Palette-Space-Section:      var(--i8i-Gap-32);
    --i8i-Palette-Space-Close:        var(--i8i-Gap-12);
    --i8i-Palette-Space-Gap:          var(--i8i-Gap-16);
    --i8i-Palette-Space-Inset:        var(--i8i-Padding-016);
    --i8i-Palette-Space-BarBlockSize: var(--i8i-Height-0008);
    --i8i-Palette-Space-Column:       min(100%, var(--i8i-Width-0176));



    /* ....... PaletteGroupTextHeading ....... */

    /* ... Color ... */
    --i8i-PaletteGroupTextHeading-Color-Ink: var(--i8i-Color-Quiet);

    /* ... Text ... */
    --i8i-PaletteGroupTextHeading-Size:   var(--i8i-FontSize-018);
    --i8i-PaletteGroupTextHeading-Weight: var(--i8i-FontWeight-600);

    /* ... Shape ... */
    --i8i-Palette-Shape-BorderWidth: var(--i8i-BorderWidth-02);
    --i8i-Palette-Shape-Radius:      var(--i8i-BorderRadius-08);
    --i8i-Palette-Shape-BarRadius:   var(--i8i-BorderRadius-02);



    /* ....... PaletteSurfaceRainbow ....... */

    /* ... Color ... */
    --i8i-PaletteSurfaceRainbow-Color-Gradient:
        linear-gradient(to right, var(--i8i-Color-Cyan), var(--i8i-Color-Blue), var(--i8i-Color-Purple), var(--i8i-Color-Magenta),
                        var(--i8i-Color-Red), var(--i8i-Color-Orange), var(--i8i-Color-Yellow), var(--i8i-Color-Lime),
                        var(--i8i-Color-Green));

    /* ... Space ... */
    --i8i-PaletteSurfaceRainbow-Space-BlockSize: var(--i8i-Palette-Space-BarBlockSize);

    /* ... Shape ... */
    --i8i-PaletteSurfaceRainbow-Shape-Radius: var(--i8i-Palette-Shape-BarRadius);



    /* ....... PaletteHues ....... */

    /* ... Space ... */
    --i8i-PaletteHues-Space-Column: var(--i8i-Palette-Space-Column);
    --i8i-PaletteHues-Space-Gap:    var(--i8i-Palette-Space-Gap);



    /* ....... PaletteHuesSwatch ....... */

    /* ... Color ... */
    --i8i-PaletteHuesSwatch-Color-Hue:  var(--i8i-Color-Text);
    --i8i-PaletteHuesSwatch-Color-Edge: var(--i8i-Color-Line);

    /* ... Space ... */
    --i8i-PaletteHuesSwatch-Space-Gap:     var(--i8i-Gap-08);
    --i8i-PaletteHuesSwatch-Space-Padding: var(--i8i-Palette-Space-Inset);

    /* ... Shape ... */
    --i8i-PaletteHuesSwatch-Shape-BorderWidth: var(--i8i-Palette-Shape-BorderWidth);
    --i8i-PaletteHuesSwatch-Shape-Radius:      var(--i8i-Palette-Shape-Radius);



    /* ....... PaletteHuesSwatchSurfaceBar ....... */

    /* ... Space ... */
    --i8i-PaletteHuesSwatchSurfaceBar-Space-BlockSize: var(--i8i-Palette-Space-BarBlockSize);

    /* ... Shape ... */
    --i8i-PaletteHuesSwatchSurfaceBar-Shape-Radius: var(--i8i-Palette-Shape-BarRadius);



    /* ....... PaletteHuesSwatchTextName ....... */

    /* ... Text ... */
    --i8i-PaletteHuesSwatchTextName-Size:   var(--i8i-FontSize-018);
    --i8i-PaletteHuesSwatchTextName-Weight: var(--i8i-FontWeight-600);



    /* ....... PaletteHuesSwatchTextValue ....... */

    /* ... Color ... */
    --i8i-PaletteHuesSwatchTextValue-Color-Ink: var(--i8i-Color-Quiet);

    /* ... Text ... */
    --i8i-PaletteHuesSwatchTextValue-Size:   var(--i8i-Palette-Text-SmallSize);
    --i8i-PaletteHuesSwatchTextValue-Weight: var(--i8i-Palette-Text-SmallWeight);



    /* ....... PaletteGrays ....... */

    /* ... Space ... */
    --i8i-PaletteGrays-Space-Column: var(--i8i-Palette-Space-Column);
    --i8i-PaletteGrays-Space-Gap:    var(--i8i-Palette-Space-Gap);



    /* ....... PaletteGraysSurfaceSwatch ....... */

    /* ... Color ... */
    --i8i-PaletteGraysSurfaceSwatch-Color-Surface: var(--i8i-Color-Base);
    --i8i-PaletteGraysSurfaceSwatch-Color-Ink:     var(--i8i-Color-Text);
    --i8i-PaletteGraysSurfaceSwatch-Color-Edge:    var(--i8i-Color-Line);

    /* ... Text ... */
    --i8i-PaletteGraysSurfaceSwatch-Text-Size:   var(--i8i-Palette-Text-SmallSize);
    --i8i-PaletteGraysSurfaceSwatch-Text-Weight: var(--i8i-Palette-Text-SmallWeight);

    /* ... Space ... */
    --i8i-PaletteGraysSurfaceSwatch-Space-Padding: var(--i8i-Palette-Space-Inset);

    /* ... Shape ... */
    --i8i-PaletteGraysSurfaceSwatch-Shape-BorderWidth: var(--i8i-Palette-Shape-BorderWidth);
    --i8i-PaletteGraysSurfaceSwatch-Shape-Radius:      var(--i8i-Palette-Shape-Radius);



    /* ....... PaletteCard ....... */

    /* ... Color ... */
    --i8i-PaletteCard-Color-Surface: var(--i8i-Color-Panel);
    --i8i-PaletteCard-Color-Edge:    linear-gradient(120deg, var(--i8i-Color-Cyan), var(--i8i-Color-Purple), var(--i8i-Color-Red));

    /* ... Space ... */
    --i8i-PaletteCard-Space-Gap:     var(--i8i-Palette-Space-Gap);
    --i8i-PaletteCard-Space-Padding: var(--i8i-Padding-024);

    /* ... Shape ... */
    --i8i-PaletteCard-Shape-BorderWidth: var(--i8i-Palette-Shape-BorderWidth);
    --i8i-PaletteCard-Shape-Radius:      var(--i8i-Palette-Shape-Radius);



    /* ....... PaletteCardTextHeading ....... */

    /* ... Color ... */
    --i8i-PaletteCardTextHeading-Color-Ink: var(--i8i-Color-Text);

    /* ... Text ... */
    --i8i-PaletteCardTextHeading-Font:       var(--i8i-Text-TitleFont);
    --i8i-PaletteCardTextHeading-Size:       clamp(var(--i8i-FontSize-024), 1.3333rem + 0.8333cqi, var(--i8i-FontSize-032));
    --i8i-PaletteCardTextHeading-Weight:     var(--i8i-Text-TitleWeight);
    --i8i-PaletteCardTextHeading-LineHeight: var(--i8i-Text-TitleLineHeight);
}







/* =============================================================== */
/*                            STRUCTURE                            */
/* =============================================================== */

/* The palette page - its parts stacked with a wide even gap, centered within the widest a page reads at */
.i8iPalette {
    box-sizing:    border-box;
    display:       grid;
    gap:           var(--i8i-Palette-Space-Section);
    inline-size:   var(--i8i-Palette-Space-InlineSize);
    padding:       var(--i8i-Palette-Space-Padding);
    margin-inline: auto;
}



/* The page's opening - its heading, its line, and the rainbow bar, held close together */
.i8iPaletteIntro {
    box-sizing: border-box;
    display:    grid;
    gap:        var(--i8i-Palette-Space-Close);
}



/* A group - one part of the palette, its title held close over its contents */
.i8iPaletteGroup {
    box-sizing: border-box;
    display:    grid;
    gap:        var(--i8i-Palette-Space-Close);
}



/* A group's title - the quiet ink, a step above the body type */
.i8iPaletteGroupTextHeading {
    box-sizing:   border-box;
    margin-block: 0;
    color:        var(--i8i-PaletteGroupTextHeading-Color-Ink);
    font-size:    var(--i8i-PaletteGroupTextHeading-Size);
    font-weight:  var(--i8i-PaletteGroupTextHeading-Weight);
}



/* The rainbow bar - a thin strip carrying the whole palette as one gradient */
.i8iPaletteSurfaceRainbow {
    box-sizing:       border-box;
    block-size:       var(--i8i-PaletteSurfaceRainbow-Space-BlockSize);
    border-radius:    var(--i8i-PaletteSurfaceRainbow-Shape-Radius);
    background-image: var(--i8i-PaletteSurfaceRainbow-Color-Gradient);
}



/* The hue grid - a list of swatches, as many to a row as the width holds */
.i8iPaletteHues {
    box-sizing:            border-box;
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--i8i-PaletteHues-Space-Column), 1fr));
    gap:                   var(--i8i-PaletteHues-Space-Gap);
    padding:               0;
    margin-block:          0;
    list-style-type:       none;
}



/* A hue swatch - one hue's bar, name, and value, edged in one gray all the way around */
.i8iPaletteHuesSwatch {
    box-sizing:    border-box;
    display:       grid;
    gap:           var(--i8i-PaletteHuesSwatch-Space-Gap);
    padding:       var(--i8i-PaletteHuesSwatch-Space-Padding);
    border:
        var(--i8i-PaletteHuesSwatch-Shape-BorderWidth)
        solid
        var(--i8i-PaletteHuesSwatch-Color-Edge);
    border-radius: var(--i8i-PaletteHuesSwatch-Shape-Radius);
}



/* The red swatch - its bar and its name take red */
.i8iPaletteHuesSwatchRed {
    --i8i-PaletteHuesSwatch-Color-Hue: var(--i8i-Color-Red);
}



/* The orange swatch - its bar and its name take orange */
.i8iPaletteHuesSwatchOrange {
    --i8i-PaletteHuesSwatch-Color-Hue: var(--i8i-Color-Orange);
}



/* The yellow swatch - its bar and its name take yellow */
.i8iPaletteHuesSwatchYellow {
    --i8i-PaletteHuesSwatch-Color-Hue: var(--i8i-Color-Yellow);
}



/* The lime swatch - its bar and its name take lime */
.i8iPaletteHuesSwatchLime {
    --i8i-PaletteHuesSwatch-Color-Hue: var(--i8i-Color-Lime);
}



/* The green swatch - its bar and its name take green */
.i8iPaletteHuesSwatchGreen {
    --i8i-PaletteHuesSwatch-Color-Hue: var(--i8i-Color-Green);
}



/* The cyan swatch - its bar and its name take cyan */
.i8iPaletteHuesSwatchCyan {
    --i8i-PaletteHuesSwatch-Color-Hue: var(--i8i-Color-Cyan);
}



/* The blue swatch - its bar and its name take blue */
.i8iPaletteHuesSwatchBlue {
    --i8i-PaletteHuesSwatch-Color-Hue: var(--i8i-Color-Blue);
}



/* The purple swatch - its bar and its name take purple */
.i8iPaletteHuesSwatchPurple {
    --i8i-PaletteHuesSwatch-Color-Hue: var(--i8i-Color-Purple);
}



/* The magenta swatch - its bar and its name take magenta */
.i8iPaletteHuesSwatchMagenta {
    --i8i-PaletteHuesSwatch-Color-Hue: var(--i8i-Color-Magenta);
}



/* A swatch's bar - a thin rounded strip across the top of the swatch, in the swatch's hue */
.i8iPaletteHuesSwatchSurfaceBar {
    box-sizing:       border-box;
    block-size:       var(--i8i-PaletteHuesSwatchSurfaceBar-Space-BlockSize);
    border-radius:    var(--i8i-PaletteHuesSwatchSurfaceBar-Shape-Radius);
    background-color: var(--i8i-PaletteHuesSwatch-Color-Hue);
}



/* A swatch's name - the hue's name, written in the swatch's hue */
.i8iPaletteHuesSwatchTextName {
    box-sizing:  border-box;
    color:       var(--i8i-PaletteHuesSwatch-Color-Hue);
    font-size:   var(--i8i-PaletteHuesSwatchTextName-Size);
    font-weight: var(--i8i-PaletteHuesSwatchTextName-Weight);
}



/* A swatch's value - the hue as oklch writes it, kept whole on one line */
.i8iPaletteHuesSwatchTextValue {
    box-sizing:  border-box;
    white-space: nowrap;
    color:       var(--i8i-PaletteHuesSwatchTextValue-Color-Ink);
    font-size:   var(--i8i-PaletteHuesSwatchTextValue-Size);
    font-weight: var(--i8i-PaletteHuesSwatchTextValue-Weight);
}



/* The gray grid - a list of gray swatches, as many to a row as the width holds */
.i8iPaletteGrays {
    box-sizing:            border-box;
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--i8i-PaletteGrays-Space-Column), 1fr));
    gap:                   var(--i8i-PaletteGrays-Space-Gap);
    padding:               0;
    margin-block:          0;
    list-style-type:       none;
}



/* A gray swatch - one gray as a block, labeled with its name, the base gray its resting surface */
.i8iPaletteGraysSurfaceSwatch {
    box-sizing:       border-box;
    padding:          var(--i8i-PaletteGraysSurfaceSwatch-Space-Padding);
    border:
        var(--i8i-PaletteGraysSurfaceSwatch-Shape-BorderWidth)
        solid
        var(--i8i-PaletteGraysSurfaceSwatch-Color-Edge);
    border-radius:    var(--i8i-PaletteGraysSurfaceSwatch-Shape-Radius);
    background-color: var(--i8i-PaletteGraysSurfaceSwatch-Color-Surface);
    color:            var(--i8i-PaletteGraysSurfaceSwatch-Color-Ink);
    font-size:        var(--i8i-PaletteGraysSurfaceSwatch-Text-Size);
    font-weight:      var(--i8i-PaletteGraysSurfaceSwatch-Text-Weight);
}



/* The panel gray's swatch */
.i8iPaletteGraysSurfaceSwatchPanel {
    --i8i-PaletteGraysSurfaceSwatch-Color-Surface: var(--i8i-Color-Panel);
}



/* The raised gray's swatch */
.i8iPaletteGraysSurfaceSwatchRaised {
    --i8i-PaletteGraysSurfaceSwatch-Color-Surface: var(--i8i-Color-Raised);
}



/* The line gray's swatch */
.i8iPaletteGraysSurfaceSwatchLine {
    --i8i-PaletteGraysSurfaceSwatch-Color-Surface: var(--i8i-Color-Line);
}



/* The quiet gray's swatch - light enough that its label turns dark */
.i8iPaletteGraysSurfaceSwatchQuiet {
    --i8i-PaletteGraysSurfaceSwatch-Color-Surface: var(--i8i-Color-Quiet);
    --i8i-PaletteGraysSurfaceSwatch-Color-Ink:     var(--i8i-Color-Base);
}



/* The text gray's swatch - light enough that its label turns dark */
.i8iPaletteGraysSurfaceSwatchText {
    --i8i-PaletteGraysSurfaceSwatch-Color-Surface: var(--i8i-Color-Text);
    --i8i-PaletteGraysSurfaceSwatch-Color-Ink:     var(--i8i-Color-Base);
}



/* The card - a panel edged in a rainbow gradient, its children stacked with even gaps */
.i8iPaletteCard {
    box-sizing:    border-box;
    display:       grid;
    gap:           var(--i8i-PaletteCard-Space-Gap);
    padding:       var(--i8i-PaletteCard-Space-Padding);
    border:        var(--i8i-PaletteCard-Shape-BorderWidth) solid transparent;
    border-radius: var(--i8i-PaletteCard-Shape-Radius);
    background:
        linear-gradient(var(--i8i-PaletteCard-Color-Surface), var(--i8i-PaletteCard-Color-Surface)) padding-box,
        var(--i8i-PaletteCard-Color-Edge) border-box;
}



/* The card's heading - a smaller title than the page's own */
.i8iPaletteCardTextHeading {
    box-sizing:   border-box;
    margin-block: 0;
    color:        var(--i8i-PaletteCardTextHeading-Color-Ink);
    font-family:  var(--i8i-PaletteCardTextHeading-Font);
    font-size:    var(--i8i-PaletteCardTextHeading-Size);
    font-weight:  var(--i8i-PaletteCardTextHeading-Weight);
    line-height:  var(--i8i-PaletteCardTextHeading-LineHeight);
}