/* =====================================================================
   Judo Gokyo – central colour theme
   Every page links this file first. Change a colour here and it changes
   everywhere. Use the semantic names (second block) in page styles.
   ===================================================================== */
:root {
  /* ---- palette ---- */
  --anthracite:      #1E2226;   /* header, footer, primary dark */
  --graphite:        #2C3238;   /* dark cards, hover on dark */
  --slate:           #5F6870;   /* muted text */
  --pebble:          #9AA2A9;   /* faint text, "soon" labels */
  --line:            #DADDE0;   /* borders, dividers */
  --mist:            #F3F4F5;   /* page background */
  --white:           #FFFFFF;   /* cards, surfaces */

  --vermilion:       #D6332A;   /* accent: buttons, links, active phase */
  --vermilion-dark:  #B52A22;   /* accent hover */
  --vermilion-tint:  #FBE7E5;   /* accent background tint */

  --tatami:          #8FA07C;   /* mat green, positive states */
  --tatami-tint:     #DCE4D3;   /* badge background */
  --tatami-ink:      #2F3A24;   /* text on tatami tint */
  --ok:              #4E8A3E;   /* check marks, highlight rings */

  /* ---- semantic roles (use these in page styles) ---- */
  --bg:              var(--mist);
  --surface:         var(--white);
  --ink:             var(--anthracite);
  --muted:           var(--slate);
  --faint:           var(--pebble);
  --border:          var(--line);
  --accent:          var(--vermilion);
  --accent-hover:    var(--vermilion-dark);
  --accent-tint:     var(--vermilion-tint);

  --header-bg:       var(--anthracite);
  --header-ink:      var(--white);
  --header-muted:    #B9C0C6;
  --header-faint:    #8B949C;

  --shadow:          0 2px 14px rgba(30, 34, 38, .08);
  --shadow-sm:       0 1px 6px rgba(30, 34, 38, .06);
}

html { color-scheme: light; }