/* SPDX-License-Identifier: LicenseRef-Proprietary */
/* Copyright (C) 2026, araCreate Group */
/* Author: Vishnu <vishnu@aracreate.group> */
/* Description: This file contains the plain HTML element defaults */

/* ==========================================================================
   araCreate Design System — Base
   Element defaults. Load immediately after tokens.css.
   --------------------------------------------------------------------------
   This file styles plain HTML tags only. It contains no components and no
   class names, so any page that includes it starts out already on-brand
   before a single component is added.

   Type values are locked to aracreate.group exactly (decision 19 Aug 2026).
   Every value comes from tokens.css — there are no raw numbers below.
   ========================================================================== */

/* ---- Reset ---------------------------------------------------------------
   Minimal and deliberate. Not a third-party reset: we own these lines.      */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

/* ---- Page ---------------------------------------------------------------- */

body {
  background-color: var(--ac-surface-page);
  color: var(--ac-text-primary);
  font-family: var(--ac-font-text);
  font-size: var(--ac-text-base);
  font-weight: var(--ac-weight-light);
  line-height: var(--ac-leading-body);
  letter-spacing: var(--ac-tracking-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---- Headings -----------------------------------------------------------
   Sizes locked as measured. Bottom margins carried over from the live site
   (.7em on h1–h2, .6em on h3–h4, 1em on h5–h6) because they are part of the
   look being preserved.                                                     */

h1, h2, h3, h4, h5, h6 {
  color: var(--ac-text-primary);
  font-family: var(--ac-font-text);
  text-wrap: balance;
}

h1 { font-size: var(--ac-h1); line-height: var(--ac-leading-h1);
     font-weight: var(--ac-weight-light); margin-bottom: .7em; }
h2 { font-size: var(--ac-h2); line-height: var(--ac-leading-h2);
     font-weight: var(--ac-weight-light); margin-bottom: .7em; }
h3 { font-size: var(--ac-h3); line-height: var(--ac-leading-h3);
     font-weight: var(--ac-weight-light); margin-bottom: .6em; }
h4 { font-size: var(--ac-h4); line-height: var(--ac-leading-h4);
     font-weight: var(--ac-weight-light); margin-bottom: .6em; }
h5 { font-size: var(--ac-h5); line-height: var(--ac-leading-h5);
     font-weight: var(--ac-weight-regular); margin-bottom: 1em; }
h6 { font-size: var(--ac-h6); line-height: var(--ac-leading-h6);
     font-weight: var(--ac-weight-medium);
     letter-spacing: var(--ac-tracking-label); margin-bottom: 1em; }

/* ---- Body copy ---------------------------------------------------------- */

p {
  margin-bottom: var(--ac-space-3);
  max-width: var(--ac-content-max);
  text-wrap: pretty;
}

/* Ara, 1 Sep 2026: emphasis is MEDIUM, not semibold. Poppins at 600 next to
   200/300 body reads as a different typeface; 500 emphasises without breaking
   the line. */
strong, b { font-weight: var(--ac-weight-medium); color: var(--ac-text-heading); }
em, i     { font-style: italic; }

small {
  font-size: var(--ac-text-sm);
  color: var(--ac-text-muted);
}

/* ---- Links -------------------------------------------------------------- */

a {
  color: var(--ac-text-primary);
  font-family: var(--ac-font-text);
  font-size: var(--ac-text-link);
  font-weight: var(--ac-weight-medium);
  line-height: 1.8em;
  letter-spacing: var(--ac-tracking-normal);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: from-font;
  transition: color var(--ac-duration-fast) var(--ac-ease);
}

a:hover { color: var(--ac-text-heading); }

/* Links inside running text inherit the paragraph's size rather than
   shrinking to 12px — otherwise a link mid-sentence changes the line's
   rhythm. Deliberate exception to the locked link size.                     */
p a, li a, blockquote a, td a {
  font-size: inherit;
  font-weight: var(--ac-weight-regular);
}

/* ---- Focus -------------------------------------------------------------
   One visible focus style for the whole system, on charcoal rather than
   Webflow's default blue. :focus-visible so it appears for keyboard users
   without ringing every mouse click.                                        */

:focus-visible {
  outline: var(--ac-focus-width) solid var(--ac-focus);
  outline-offset: var(--ac-focus-offset);
  border-radius: var(--ac-radius-sm);
}

:focus:not(:focus-visible) { outline: none; }

/* Never remove this. It is the only way a keyboard user knows where they
   are on the page.                                                          */

/* ---- Lists -------------------------------------------------------------- */

ul, ol {
  margin-bottom: var(--ac-space-9);
  padding-left: var(--ac-space-7);
  max-width: var(--ac-content-max);
}

li { margin-bottom: var(--ac-space-1); }

li::marker { color: var(--ac-text-muted); }

/* ---- Quotes ------------------------------------------------------------- */

blockquote {
  font-size: var(--ac-text-base);
  line-height: var(--ac-leading-body);
  letter-spacing: var(--ac-tracking-normal);
  border-left: var(--ac-border-width-strong) solid var(--ac-surface-accent);
  padding-left: var(--ac-space-7);
  margin-bottom: var(--ac-space-9);
  color: var(--ac-text-heading);
  max-width: var(--ac-content-max);
}

/* ---- Figures ------------------------------------------------------------ */

figure { margin-bottom: var(--ac-space-9); }

figcaption {
  color: var(--ac-text-muted);
  font-size: var(--ac-text-sm);
  line-height: var(--ac-leading-tight);
  margin-top: var(--ac-space-1);
}

/* ---- Code --------------------------------------------------------------- */

code, kbd, samp {
  font-family: var(--ac-font-mono);
  font-size: .88em;
  background-color: var(--ac-code-bg);
  color: var(--ac-code-text);
  padding: .12em .4em;
  border-radius: var(--ac-radius-sm);
}

pre {
  font-family: var(--ac-font-mono);
  background-color: var(--ac-surface-dark);
  color: var(--ac-text-inverse);
  padding: var(--ac-space-7);
  border-radius: var(--ac-radius-md);
  overflow-x: auto;
  margin-bottom: var(--ac-space-9);
  line-height: var(--ac-leading-tight);
}

pre code { background: none; padding: 0; color: inherit; }

/* ---- Rules -------------------------------------------------------------- */

hr {
  border: 0;
  border-top: var(--ac-border-width) solid var(--ac-border);
  margin: var(--ac-space-10) 0;
}

/* ---- Tables ------------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--ac-space-9);
}

th {
  text-align: left;
  font-weight: var(--ac-weight-medium);
  color: var(--ac-text-heading);
  border-bottom: var(--ac-border-width-strong) solid var(--ac-border-strong);
  padding: var(--ac-space-4) var(--ac-space-6);
}

td {
  border-bottom: var(--ac-border-width) solid var(--ac-border);
  padding: var(--ac-space-4) var(--ac-space-6);
  vertical-align: top;
}

/* ---- Selection ---------------------------------------------------------- */

::selection {
  background-color: var(--ac-surface-accent-soft);
  color: var(--ac-text-on-accent);
}

/* ---- Inverse surface context -------------------------------------------
   Put data-ac-surface="inverse" on any dark band — a header, a footer, a
   call-to-action strip — and everything inside it re-points its own text,
   border and code colours. Components need no dark variant of their own:
   they ask for --ac-text-primary and get the right answer either way.

   This exists because of a real bug caught in testing: inline <code> was
   styled for a light background, so on a dark header it rendered
   graphite-on-graphite — 1.00:1, completely invisible. Scoping the tokens
   fixes that class of bug once rather than per component.                  */

.ac-surface-inverse,
[data-ac-surface="inverse"] {
  background-color: var(--ac-surface-dark);
  color: var(--ac-text-inverse);

  /* Re-measured 20 Aug 2026: the band is graphite, not brand black, so every
     white-alpha value here had to be raised. At 70% white, muted text landed
     at 4.47:1 — under the bar by a hair. */
  --ac-text-primary:    var(--ac-text-inverse);   /*  7.44:1 */
  --ac-text-heading:     var(--ac-pure-white);             /*  7.44:1 */
  --ac-text-muted:      #ffffffd9;                   /*  5.75:1 */
  --ac-text-placeholder: #ffffffd9;
  --ac-border:  #ffffff4d;
  --ac-border-control:  #ffffff99;
  --ac-code-bg:         #ffffff33;
  --ac-code-text:       var(--ac-pure-white);             /*  7.44:1 */
  --ac-info-surface:    #ffffff1a;

  /* Surfaces re-point too. Inside a dark band, "the page" IS dark — a component
     that paints itself with --ac-surface-page must follow the band, or it stays
     light while its text turns white. */
  --ac-surface-page:    var(--ac-surface-dark);
  /* CORRECTED. The first pass sent these LIGHTER (#6f6f6f, and a white tint),
     reasoning that a panel lifted off a band should lift. On a graphite band
     that breaks the text ramp: muted white-alpha resolves to about #d8d8d8,
     which measures 3.53:1 on #6f6f6f. Graphite is mid-grey and all the
     headroom is below it, so both surfaces step DOWN — graphite tinted with
     ink, dark grey rather than black — and every text token gains contrast
     instead of losing it. Separation still comes from the signature edge. */
  --ac-surface-raised:  #4f4f4f;
  --ac-surface-subtle:  #464646;
}

/* The accent surface. Ink on yellow measures 9.51:1. Yellow is only ever
   a background, so this class exists and a matching text class does not. */
.ac-surface-accent {
  background-color: var(--ac-surface-accent);
  color: var(--ac-text-on-accent);

  --ac-text-primary:  var(--ac-text-on-accent);
  --ac-text-heading:   var(--ac-text-on-accent);
  --ac-text-muted:    var(--ac-graphite-gray);
  --ac-border: #55555540;
  --ac-code-bg:       #5555552b;
  --ac-code-text:     var(--ac-graphite-gray);

  /* Same reasoning as the inverse surface: inside a yellow band, a component
     that paints itself with the page colour must follow the band. */
  --ac-surface-page:   var(--ac-surface-accent);
  --ac-surface-raised: var(--ac-pure-white);
  --ac-surface-subtle: #5555552b;
}

.ac-surface-accent :is(h1, h2, h3, h4, h5, h6) { color: var(--ac-text-on-accent); }

/* The subtle surface — light grey, for a panel that should recede. Strong and
   default text both still pass on it, but MUTED does not: grey-450 on grey-300
   measures 3.19:1, so the band re-points muted one rung darker. Found by the
   contrast gate on 20 Aug 2026; the previous comment here claimed all text
   tokens were safe on this surface, and that was wrong. */
.ac-surface-subtle {
  background-color: var(--ac-surface-subtle);
  --ac-border: var(--ac-gray-450);
  --ac-text-muted: var(--ac-graphite-gray);
  --ac-text-placeholder: var(--ac-graphite-gray);
}

/* The raised surface, named for symmetry so all four can be reached the same
   way rather than three by class and one by token. */
.ac-surface-raised { background-color: var(--ac-surface-raised); }

/* Headings inside an inverse surface follow the same rule. */
[data-ac-surface="inverse"] :is(h1, h2, h3, h4, h5, h6),
.ac-surface-inverse :is(h1, h2, h3, h4, h5, h6) {
  color: var(--ac-text-heading);
}

/* Focus rings need to invert too — graphite on graphite is not a focus ring. */
[data-ac-surface="inverse"] :focus-visible,
.ac-surface-inverse :focus-visible {
  outline-color: var(--ac-pure-white);
}

/* ---- Screen-reader only -------------------------------------------------
   For labels that must exist for assistive technology but not appear on
   screen. Used throughout the component set.                               */

.ac-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Skip link ---------------------------------------------------------- */

.ac-skip-link {
  position: absolute;
  top: var(--ac-space-3);
  left: var(--ac-space-3);
  z-index: var(--ac-z-toast);
  background-color: var(--ac-surface-dark);
  color: var(--ac-text-inverse);
  padding: var(--ac-space-3) var(--ac-space-7);
  border-radius: var(--ac-radius-sm);
  transform: translateY(-200%);
  transition: transform var(--ac-duration-fast) var(--ac-ease);
}

.ac-skip-link:focus { transform: translateY(0); }