chore(ia): Reorganize CSS pages - part 6 (moving keywords, types, functions under reference/values) (mdn#41810)

* create values directory and listing page

* move css-keyword files into css/reference/values

* move css-type files into css/reference/values

* move css-function files into css/reference/values

* move css_value_functions into css/reference/values

* move css_data_types into css/reference/values

* update listing and landing pages

* update sidebar and add short-titles

* move alpha listing to respective pages

Author: dipikabh

files/en-us/_redirects.txt

@@ -16,5 +16,5 @@ To draw a quadratic Bézier curve, two imaginary lines are drawn, one from P<sub
 ## See also
 
 - [Bézier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve) on Wikipedia
-- [Cubic Bézier easing functions in CSS](/en-US/docs/Web/CSS/easing-function/cubic-bezier)
+- [Cubic Bézier easing functions in CSS](/en-US/docs/Web/CSS/Reference/Values/easing-function/cubic-bezier)
 - {{SVGAttr("keySplines")}} SVG attribute

files/en-us/_wikihistory.json

@@ -5,7 +5,7 @@ page-type: glossary-definition
 sidebar: glossarysidebar
 ---
 
-**Color spaces** are named organizations of colors for underlying color models of coordinate-based color arrangements. A color model defines how the components of a color (for example, the `h`, `w`, and `b` channels of an [`hwb()`](/en-US/docs/Web/CSS/color_value/hwb) color) relate to a color space. Most color spaces are three- or four- dimensional grids that represent colors. Each dimension (or axis) corresponds to a different channel. Colors can be expressed in multiple color spaces, and can be transformed from one color space to another, while still looking the same.
+**Color spaces** are named organizations of colors for underlying color models of coordinate-based color arrangements. A color model defines how the components of a color (for example, the `h`, `w`, and `b` channels of an [`hwb()`](/en-US/docs/Web/CSS/Reference/Values/color_value/hwb) color) relate to a color space. Most color spaces are three- or four- dimensional grids that represent colors. Each dimension (or axis) corresponds to a different channel. Colors can be expressed in multiple color spaces, and can be transformed from one color space to another, while still looking the same.
 
 Color spaces categorize and define specific ranges of colors. Each color space is defined by a mathematical model and associated rule set. Each color space has a defined {{glossary("Gamut", "gamut")}}, which refers to the specific range of colors it can represent. These rules enable consistent and reproducible color representation across different devices and software.
 
@@ -21,13 +21,13 @@ Color spaces are either [rectangular or polar](https://ericportis.com/posts/2024
 
 RGB is a color model that represents colors as mixtures of three underlying components — red, green, and blue color channels — that create various hues when combined. sRGB, or "Standard RGB", is the underlying color space for {{Glossary("RGB")}} colors. sRGB is intended to codify the display specification of PC and the {{glossary("world wide web", "Web")}} based imaging systems. It is now usually the assumed color space for those without tagged or without an embedded color profile.
 
-There are several RGB color spaces, like the _Adobe RGB_ color space, that can represent a wider {{glossary("gamut")}} of color than the _sRGB_ color space. The coordinates in _sRGB_ and _Adobe RGB_ (`a98-rgb`) are different. There are many ways to describe the RGB components of a color. In {{Glossary("CSS")}} they can be represented as a single 24-bit integer in hexadecimal notation (for example, `#add8e6` is light blue), or in [`rgb()`](/en-US/docs/Web/CSS/color_value/rgb) functional notation as three separate numbers between 0 and 255 (for example, `rgb(46 139.5 87)`).
+There are several RGB color spaces, like the _Adobe RGB_ color space, that can represent a wider {{glossary("gamut")}} of color than the _sRGB_ color space. The coordinates in _sRGB_ and _Adobe RGB_ (`a98-rgb`) are different. There are many ways to describe the RGB components of a color. In {{Glossary("CSS")}} they can be represented as a single 24-bit integer in hexadecimal notation (for example, `#add8e6` is light blue), or in [`rgb()`](/en-US/docs/Web/CSS/Reference/Values/color_value/rgb) functional notation as three separate numbers between 0 and 255 (for example, `rgb(46 139.5 87)`).
 
-CSS `<color>` values in the sRGB color spaces include {{cssxref("hex-color")}}, {{cssxref("named-color")}}, {{cssxref("color_value/rgb", "rgb()")}}, {{cssxref("color_value/hsl", "hsl()")}} (hue, saturation, lightness), and {{cssxref("color_value/hwb", "hwb()")}} (hue, whiteness, blackness). There are also the `srgb`, `srgb-linear`, `a98-rgb`, and `prophoto-rgb` color spaces for the [`color()`](/en-US/docs/Web/CSS/color_value/color) function.
+CSS `<color>` values in the sRGB color spaces include {{cssxref("hex-color")}}, {{cssxref("named-color")}}, {{cssxref("color_value/rgb", "rgb()")}}, {{cssxref("color_value/hsl", "hsl()")}} (hue, saturation, lightness), and {{cssxref("color_value/hwb", "hwb()")}} (hue, whiteness, blackness). There are also the `srgb`, `srgb-linear`, `a98-rgb`, and `prophoto-rgb` color spaces for the [`color()`](/en-US/docs/Web/CSS/Reference/Values/color_value/color) function.
 
-The HSV (hue, saturation, and value) color space, and its synonym HSB (hue, saturation, and brightness), are represented in CSS as [`hwb()`](/en-US/docs/Web/CSS/color_value/hwb). Named colors are simply keywords mapped to specific hex values. Converting these various color notations to sRGB is straightforward mathematically. Note that {{cssxref("&lt;color&gt;","currentColor","#currentcolor_keyword")}} can be any color — it is not restricted to sRGB.
+The HSV (hue, saturation, and value) color space, and its synonym HSB (hue, saturation, and brightness), are represented in CSS as [`hwb()`](/en-US/docs/Web/CSS/Reference/Values/color_value/hwb). Named colors are simply keywords mapped to specific hex values. Converting these various color notations to sRGB is straightforward mathematically. Note that {{cssxref("&lt;color&gt;","currentColor","#currentcolor_keyword")}} can be any color — it is not restricted to sRGB.
 
-The `rgb()` color function is not the only color function that can represent the _sRGB_ color space. Cylindrical coordinate systems like the [`HSL`](/en-US/docs/Web/CSS/color_value/hsl) (_hue-saturation-lightness_) or [`HWB`](/en-US/docs/Web/CSS/color_value/hwb) (_hue-whiteness-blackness_) color models are also used to represent a sRGB color on the web.
+The `rgb()` color function is not the only color function that can represent the _sRGB_ color space. Cylindrical coordinate systems like the [`HSL`](/en-US/docs/Web/CSS/Reference/Values/color_value/hsl) (_hue-saturation-lightness_) or [`HWB`](/en-US/docs/Web/CSS/Reference/Values/color_value/hwb) (_hue-whiteness-blackness_) color models are also used to represent a sRGB color on the web.
 
 - `srgb` color space
   - : The sRGB color space, or "Standard RGB", is the standard RGB (red, green, blue) color space. It was created to be used on monitors, printers, and the Web. It is the most widely used color space and is supported by most operating systems, software programs, monitors, and printers. sRGB is based on `r`, `g`, and `b`, with in-gamut values ranging from `0` to `1`. The whitepoint is D65.
@@ -87,7 +87,7 @@ People with normal vision have three kinds of cone cells that sense light, havin
 ## See also
 
 - {{cssxref("@media/color-gamut", "color-gamut")}} `@media` feature
-- [CSS data type: `<color>`](/en-US/docs/Web/CSS/color_value)
+- [CSS data type: `<color>`](/en-US/docs/Web/CSS/Reference/Values/color_value)
 - [sRGB color space](https://webstore.iec.ch/en/publication/6168)
 - [CIELAB color space](https://en.wikipedia.org/wiki/CIELAB_color_space) on Wikipedia
 - [CIE 1931 color space](https://en.wikipedia.org/wiki/CIE_1931_color_space) on Wikipedia

files/en-us/glossary/bezier_curve/index.md

@@ -7,7 +7,7 @@ sidebar: glossarysidebar
 
 A **color wheel**, or a _color circle_, represents a palette of colors in chart form, arranged in a circle. A color wheel can display colors identified by two polar coordinates, the _angle_ and the _distance_ from the origin, the circle's center.
 
-Color wheels are convenient for comparing colors expressed in polar or cylindrical coordinates, like [`hsl()`](/en-US/docs/Web/CSS/color_value/hsl), [`hwb()`](/en-US/docs/Web/CSS/color_value/hwb), or [`lch()`](/en-US/docs/Web/CSS/color_value/lch).
+Color wheels are convenient for comparing colors expressed in polar or cylindrical coordinates, like [`hsl()`](/en-US/docs/Web/CSS/Reference/Values/color_value/hsl), [`hwb()`](/en-US/docs/Web/CSS/Reference/Values/color_value/hwb), or [`lch()`](/en-US/docs/Web/CSS/Reference/Values/color_value/lch).
 
 In such cases, _complementary colors_ are often found opposite on the same diameter. Similarly, _monochromatic colors_ – colors of the same _tone_ but of different _shades_ – are located on the same radius, and _triadic colors_ – three colors evenly spaced around the color wheel that lead to colors that work well together – are also easy to find.
 
@@ -21,7 +21,7 @@ In the digital world, color wheels are used in _color pickers_, like the default
 
 - Related glossary terms:
   - {{glossary("Color space")}}
-- [`<color>`](/en-US/docs/Web/CSS/color_value) the CSS data type
+- [`<color>`](/en-US/docs/Web/CSS/Reference/Values/color_value) the CSS data type
 - [Color theory and the color wheel](https://www.canva.com/colors/color-wheel/)
 - [How to Use the Color Wheel to Pick Your Perfect Color Palette](https://www.bhg.com/decorating/color/basics/color-wheel-color-chart/) on Better Homes & Gardens
 - [Color wheel](https://en.wikipedia.org/wiki/Color_wheel) on Wikipedia

files/en-us/glossary/color_space/index.md

@@ -8,7 +8,7 @@ sidebar: glossarysidebar
 An **escape character** is a {{glossary("character")}} that causes one or more characters that follow it to be interpreted differently. This forms an **escape sequence**, which is often used to represent a character that has an alternative meaning when printed literally, such as the quote character in a string literal. Escape sequences can have other usages too, especially in [regular expressions](/en-US/docs/Web/JavaScript/Reference/Regular_expressions#escape_sequences).
 
 - In JavaScript [regexes](/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Character_escape), [string literals](/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#string_literals), and [identifiers](/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#identifiers), we can use the backslash (`\`) to escape characters like `\'`, `\"`, `\u0026`, etc.
-- In CSS identifiers, we can use the backslash (`\`) to escape characters like `\\`, `\n`, `\26`, etc. See [escape characters](/en-US/docs/Web/CSS/ident#escaping_characters) for more information.
+- In CSS identifiers, we can use the backslash (`\`) to escape characters like `\\`, `\n`, `\26`, etc. See [escape characters](/en-US/docs/Web/CSS/Reference/Values/ident#escaping_characters) for more information.
 - In HTML text content and attribute values, we can use {{glossary("character reference", "character references")}} like `<`, `<`, or `<`.
 - In {{glossary("URL", "URLs")}}, we can use the percent sign (`%`) to escape characters like `%20`, `%3C`, `%3E`, etc.
 

files/en-us/glossary/color_wheel/index.md

@@ -9,7 +9,7 @@ sidebar: glossarysidebar
 
 There is also a {{cssxref("flex")}} property, which is a shorthand for the flexbox properties {{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}} and {{cssxref("flex-basis")}}. This property is only applicable to flex containers.
 
-In addition [`<flex>`](/en-US/docs/Web/CSS/flex_value) can refer to a [flexible length](/en-US/docs/Web/CSS/flex_value) in CSS Grid Layout.
+In addition [`<flex>`](/en-US/docs/Web/CSS/Reference/Values/flex_value) can refer to a [flexible length](/en-US/docs/Web/CSS/Reference/Values/flex_value) in CSS Grid Layout.
 
 ### Related CSS properties
 

files/en-us/glossary/escape_character/index.md

@@ -13,7 +13,7 @@ Traditionally, in web development, the only gamut used was _[sRGB](https://en.wi
 
 Since 2021, browsers have started to provide functionality for other gamuts, like _[Display-P3](/en-US/docs/Glossary/Color_space#display-p3)_, widely used in the movie industry, and _[rec2020](/en-US/docs/Glossary/Color_space#rec2020)_.
 
-Developers can define different sets of colors for devices supporting larger gamuts using the [`color-gamut`](/en-US/docs/Web/CSS/Reference/At-rules/@media/color-gamut) [media feature](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries). They can describe colors outside the RGB gamut using specific CSS functions like [`lch()`](/en-US/docs/Web/CSS/color_value/lch) for the LCH cylindrical coordinate system, or [`lab()`](/en-US/docs/Web/CSS/color_value/lab) for the Lab coordinate system.
+Developers can define different sets of colors for devices supporting larger gamuts using the [`color-gamut`](/en-US/docs/Web/CSS/Reference/At-rules/@media/color-gamut) [media feature](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries). They can describe colors outside the RGB gamut using specific CSS functions like [`lch()`](/en-US/docs/Web/CSS/Reference/Values/color_value/lch) for the LCH cylindrical coordinate system, or [`lab()`](/en-US/docs/Web/CSS/Reference/Values/color_value/lab) for the Lab coordinate system.
 
 ## See also
 

files/en-us/glossary/flex/index.md

@@ -10,7 +10,7 @@ Interpolation is a method for estimating new data points based on a set of known
 Interpolation calculates intermediate values in animations that change HTML properties such as height, width, etc.
 Color interpolation defines intermediate values of colors in color mixing, gradients, compositing, filters, transitions, animations, and color functions.
 
-Interpolations aren't necessarily linear. Most interpolated values are real, floating-point numbers; however, when there is no mid-point between two values, such as values that accept only integers, the [interpolation is discrete](/en-US/docs/Web/CSS/integer#interpolation). The progression of interpolation also depends on [easing functions](/en-US/docs/Web/CSS/easing-function) in animations and color stops, and {{CSSXref("color-interpolation-method", "color")}} and {{CSSXref("hue-interpolation-method", "hue")}} interpolation methods in gradients.
+Interpolations aren't necessarily linear. Most interpolated values are real, floating-point numbers; however, when there is no mid-point between two values, such as values that accept only integers, the [interpolation is discrete](/en-US/docs/Web/CSS/Reference/Values/integer#interpolation). The progression of interpolation also depends on [easing functions](/en-US/docs/Web/CSS/Reference/Values/easing-function) in animations and color stops, and {{CSSXref("color-interpolation-method", "color")}} and {{CSSXref("hue-interpolation-method", "hue")}} interpolation methods in gradients.
 
 In JavaScript, the term "[interpolation](/en-US/docs/Web/JavaScript/Reference/Template_literals#string_interpolation)" is used as a description of the substitution of strings in the template literals.
 
@@ -21,6 +21,6 @@ In JavaScript, the term "[interpolation](/en-US/docs/Web/JavaScript/Reference/Te
 - {{CSSXref("color-interpolation-method")}} CSS data type
 - {{CSSXref("hue-interpolation-method")}} CSS data type
 - {{CSSXref("color_value/color-mix", "color-mix()")}} CSS function
-- [Interpolating colors in CSS](/en-US/docs/Web/CSS/color_value#interpolation)
+- [Interpolating colors in CSS](/en-US/docs/Web/CSS/Reference/Values/color_value#interpolation)
 - [Interpolation](https://en.wikipedia.org/wiki/Interpolation) on Wikipedia
 - [String interpolation](https://en.wikipedia.org/wiki/String_interpolation) on Wikipedia

files/en-us/glossary/gamut/index.md

@@ -15,13 +15,13 @@ For the web, the underlying color space for an RGB value is _sRGB_ (Standard RGB
 
 Note that `sRGB` is one of [several RGB color spaces](/en-US/docs/Glossary/Color_space#rgb_color_spaces). Other RGB color spaces, like the _Adobe RGB_ color space, can represent a wider {{glossary("gamut")}} of color than the _sRGB_ color space. The coordinates in _sRGB_ and _Adobe RGB_ are different.
 
-There are many ways to describe the RGB components of a color. In {{Glossary("CSS")}}, they can be represented in various ways: in [hexadecimal](/en-US/docs/Web/CSS/hex-color) notation as a single 24-bit integer (for example, `#add8e6` is light blue) or in functional notation by using [`rgb()`](/en-US/docs/Web/CSS/color_value/rgb) with three percent values or numbers ranging from `0` to `255` (for example, `rgb(46 139 87)` is green). CSS also supports the `srgb`, `srgb-linear`, `a98-rgb`, and `prophoto-rgb` color spaces for the [`color()`](/en-US/docs/Web/CSS/color_value/color) function.
+There are many ways to describe the RGB components of a color. In {{Glossary("CSS")}}, they can be represented in various ways: in [hexadecimal](/en-US/docs/Web/CSS/Reference/Values/hex-color) notation as a single 24-bit integer (for example, `#add8e6` is light blue) or in functional notation by using [`rgb()`](/en-US/docs/Web/CSS/Reference/Values/color_value/rgb) with three percent values or numbers ranging from `0` to `255` (for example, `rgb(46 139 87)` is green). CSS also supports the `srgb`, `srgb-linear`, `a98-rgb`, and `prophoto-rgb` color spaces for the [`color()`](/en-US/docs/Web/CSS/Reference/Values/color_value/color) function.
 
-RGB is not the only color model that can represent the `sRGB` {{glossary("color space")}}. Cylindrical coordinate systems like the [`HSL`](/en-US/docs/Web/CSS/color_value/hsl) (_hue-saturation-lightness_) or [`HWB`](/en-US/docs/Web/CSS/color_value/hwb) (_hue-whiteness-blackness_) color models are also used to represent an `sRGB` color on the web.
+RGB is not the only color model that can represent the `sRGB` {{glossary("color space")}}. Cylindrical coordinate systems like the [`HSL`](/en-US/docs/Web/CSS/Reference/Values/color_value/hsl) (_hue-saturation-lightness_) or [`HWB`](/en-US/docs/Web/CSS/Reference/Values/color_value/hwb) (_hue-whiteness-blackness_) color models are also used to represent an `sRGB` color on the web.
 
 ## See also
 
-- [CSS data type: `<color>`](/en-US/docs/Web/CSS/color_value)
+- [CSS data type: `<color>`](/en-US/docs/Web/CSS/Reference/Values/color_value)
 - [ColorAide: sRGB color space](https://facelessuser.github.io/coloraide/colors/srgb/)
 - [RGB color model](https://en.wikipedia.org/wiki/RGB_color_model) on Wikipedia
 - [sRGB color space](https://en.wikipedia.org/wiki/SRGB) on Wikipedia