/* ==========================================================
   ko-wc-tokens.css
   Sifu Kathy Ong Wing Chun, wireframe token layer.

   Variable NAMES are the role names that seed theme.json at
   build time with no translation. The VALUES here are locked
   neutral/grayscale on purpose: a wireframe is a structural
   artifact, never a design decision. No client color and no
   client typeface appears in this file or in any page that
   consumes it.

   Font: Inter (locked wireframe standard, every project).
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   ========================================================== */

:root {
  /* --- Primary / accent, neutral stand-ins only, no client hue --- */
  --color-primary:        #1A1A1A;
  --color-primary-dark:   #000000;
  --color-primary-light:  #4A4A4A;

  --color-accent:         #6B6B6B;
  --color-accent-dark:    #4A4A4A;
  --color-accent-light:   #9A9A9A;

  /* --- Neutrals --- */
  --color-white:          #FFFFFF;
  --color-black:          #1A1A1A;
  --color-bg:             #FFFFFF;
  --color-bg-alt:         #F4F4F4;
  --color-bg-deep:        #1A1A1A;
  --color-border:         #D8D8D8;
  --color-border-strong:  #1A1A1A;

  /* --- Semantic --- */
  --color-text:           #1A1A1A;
  --color-text-muted:     #5E5E5E;
  --color-text-invert:    #FFFFFF;
  --color-text-invert-muted: rgba(255,255,255,0.78);
  --color-link:           #1A1A1A;
  --color-link-hover:     #4A4A4A;
  --color-focus:          #4A4A4A;

  /* --- Type --- */
  --font-primary: 'Inter', Arial, Helvetica, sans-serif;
  --font-body:    'Inter', Arial, Helvetica, sans-serif;
  --text-h1:   54px;
  --text-h2:   36px;
  --text-h3:   24px;
  --text-h4:   19px;
  --text-body: 17px;
  --text-sm:   15px;
  --text-xs:   12px;

  /* --- Spacing --- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  32px;
  --space-xl:  64px;
  --space-2xl: 96px;

  /* --- Functional status, not brand colour ---
     "Waiting on you". Identical to the values on her sitemap so the yellow
     carries one meaning across both documents. The rest of this file stays
     grayscale. */
  --color-needs-bg:       #FBF1DE;
  --color-needs-line:     #ECD7AE;
  --color-needs-fg:       #8A5A12;

  /* --- Radius --- */
  --radius-button: 2px;
  --radius-input:  2px;
  --radius-card:   2px;

  /* --- Layout --- */
  --container-max: 1120px;
  --container-narrow: 760px;
  --container-pad: 32px;
}