/* @aufbau/gestalt/gestalt.css */

@import url('./animate/functions.css');
@import url('./palettes.css');
@import url('./animate/keyframes.css');
@import url('./animate/animations.css');
@import url('./layouts/landing.css');

/*
document.body.style.setProperty('--bg', 'var(--color-bg)');
document.body.style.setProperty('--fg', 'var(--color-fg)');
document.body.style.setProperty('--ink', 'var(--color-ink)');

document.body.style.setProperty('background-color', 'var(--color-bg)');
document.body.style.setProperty('color', 'var(--color-fg)');
document.body.style.setProperty('accent-color', 'var(--color-ink)');


the axes of the design system and the shorthand properties.

axes, each writes its own raw tokens:

--palette  :: <preset> | <color>                      -> --color-bg, --color-fg, --color-ink (palettes.css)
--scheme   :: auto | light | dark                     -> color-scheme (the palettes use light-dark())
--geometry :: sharp | soft | round | pill             -> --radius()
--density  :: compact | normal | comfortable | touch  (not used yet)
--skin     :: monochrome | …                          -> the decoration of the elements (skins/)
--typo     :: system | humanist | mono | editorial    -> --font-body, --font-heading, --font-mono, --ratio
--motion   :: <number>, 0 turns every duration off

shorthands, set on an element to style that element only.
they do not inherit: a child of an element with --bg keeps its own transparent background.
the colors of the palette are --color-bg, --color-fg, --color-ink, read those.

--bg  : <color>                  background-color
--fg  : <color>                  color
--ink : <color>                  accent-color
--gap : <number> | tiny … huge   gap     (through --space())
--pad : <number> | tiny … huge   padding (through --space())
--mgn : <number> | tiny … huge   margin  (through --space())
--rad : <length> | auto | none   border-radius, auto is --radius() of the geometry
*/

/*///////////////// TOKENS | CUSTOM PROPERTIES /////////////////*/

/* ===== axes ===== */
@property --density  { inherits: true; initial-value: normal;     syntax: "compact | normal | comfortable | touch"; }
@property --geometry { inherits: true; initial-value: soft;       syntax: "sharp | soft | round | pill"; }
@property --palette  { inherits: true; initial-value: zombie;     syntax: "<color> | <custom-ident>"; }
@property --scheme   { inherits: true; initial-value: auto;       syntax: "auto | light | dark"; }
@property --skin     { inherits: true; initial-value: monochrome; syntax: "<custom-ident>"; }

/* ===== shorthands ===== */
@property --bg  { inherits: false; initial-value: transparent; syntax: "<color>"; }
@property --fg  { inherits: false; initial-value: none;        syntax: "<color> | none"; }
@property --ink { inherits: false; initial-value: none;        syntax: "<color> | none"; }
@property --gap { inherits: false; initial-value: none; syntax: "none | <number> | tiny | small | normal | large | huge"; }
@property --mgn { inherits: false; initial-value: none; syntax: "none | <number> | tiny | small | normal | large | huge"; }
@property --pad { inherits: false; initial-value: none; syntax: "none | <number> | tiny | small | normal | large | huge"; }         
@property --rad { inherits: false; initial-value: none; syntax: "none | auto | <length-percentage>"; }

/*///////////////// ... /////////////////*/

:root {
  /* a11y */
  --a11y-contrast : off;
  --a11y-motion   : off;

  /* gestalt */
  --density  : normal;
  --geometry : soft;
  --palette  : zombie;
  --scheme   : auto;
  --skin     : monochrome;

  &[data-palette] { --palette : attr(data-palette type(<color> | <custom-ident>), zombie); }
  &[data-skin]    { --skin    : attr(data-skin    type(<custom-ident>), monochrome); }
}

[data-density]  { --density  : attr(data-density  type(compact | normal | comfortable | touch), normal); }
[data-geometry] { --geometry : attr(data-geometry type(sharp | soft | round | pill), soft); }
[data-scheme]   { --scheme   : attr(data-scheme   type(auto | light | dark), auto); }

:root, [data-scheme] {
  color-scheme : if(
    style(--scheme: light) : light; 
    style(--scheme: dark)  : dark; 
    else                   : light dark
  );
}

/*//////////// GEOMETRY ////////////*/

/* the radius of the geometry: --rad: auto, or border-radius: --radius() */
@function --radius() returns <length> {
  result: if(
    style(--geometry: sharp) : 0px;
    style(--geometry: round) : 0.75rem;
    style(--geometry: pill)  : 999px;
    else                     : 0.25rem;
  );
}

/*//////////// COLORS ////////////*/

:root {
  --color-danger  : red;
  --color-error   : red;
  --color-success : green;
  --color-warning : yellow;
}

/*//////////// SHORTHANDS ////////////*/


/* specificity 0: any rule of the page that sets the property itself wins */
:where(*) {
  background-color : var(--bg);
  color            : if(style(--fg:  none): inherit; else: var(--fg));
  accent-color     : if(style(--ink: none): inherit; else: var(--ink));

  gap     : if(style(--gap: none): normal; else: --space(var(--gap)));
  padding : if(style(--pad: none): 0;      else: --space(var(--pad)));
  margin  : if(style(--mgn: none): 0;      else: --space(var(--mgn)));

  /* none steps back, so the radius an element gives itself (:host included) stays */
  border-radius : if(style(--rad: none): revert-layer; style(--rad: auto): --radius(); else: var(--rad));
}

/* the page paints the palette */
html {
  background-color : var(--color-ink, purple);
}
body {
  --bg  : var(--color-bg);
  --fg  : var(--color-fg);
  --ink : var(--color-ink);
}

/*//////////// CONFIG ////////////*/

@property --factor-space { inherits: false; initial-value: 0.25rem; syntax: "<length>"; }

:root {
  --factor-space : 0.25rem;
}