:root {

    /* --ink-900: #0A0E27;
      --ink-800: #1A1F3A;
      --ink-700: #2A3050;
      --ink-600: #3D4466;
      --ink-500: #515A7C;
      --ink-400: #6B7399;
      --ink-300: #8B92B3;
      --ink-200: #B5BACD;
      --ink-100: #E2E4ED;
      --ink-50: #F5F6FA; */


  /* Primary color Syo-Ro */
  /* --ink-500: #515a7c;
  --color-secondary-500: #8b8caa;
  --color-tertiary-500: #998f6f;
  --color-tertiary-500: #959170;
--color-tertiary-500: #8f9372;
  --color-tertiary-500: #8a9575; */

  --color-primary-50: oklch(0.961 0.039 148.7);
  --color-primary-100: oklch(0.911 0.098 147.2);
  --color-primary-200: oklch(0.838 0.136 146.93);
  --color-primary-300: oklch(0.762 0.124 146.64);
  --color-primary-400: oklch(0.695 0.113 146.95);
  --color-primary-500: #5a9661;
  --color-primary-600: oklch(0.551 0.09 146.91);
  --color-primary-700: oklch(0.475 0.077 146.95);
  --color-primary-800: oklch(0.403 0.066 146.89);
  --color-primary-900: oklch(0.273 0.045 147.43);
  --color-primary-950: oklch(0.204 0.033 147.4);

  --color-secondary-50: oklch(0.963 0.019 157.77);
  --color-secondary-100: oklch(0.925 0.04 159.17);
  --color-secondary-200: oklch(0.855 0.056 158.81);
  --color-secondary-300: oklch(0.786 0.052 158.36);
  --color-secondary-400: oklch(0.719 0.049 158.54);
  --color-secondary-500: oklch(0.65 0.045 157.97);
  --color-secondary-600: oklch(0.581 0.039 157.92);
  --color-secondary-700: oklch(0.506 0.034 157);
  --color-secondary-800: oklch(0.437 0.03 159.48);
  --color-secondary-900: oklch(0.37 0.025 158.57);
  --color-secondary-950: oklch(0.257 0.018 158.48);

  --color-tertiary-50: oklch(0.967 0.003 355.3);
  --color-tertiary-100: oklch(0.932 0.006 3.69);
  --color-tertiary-200: oklch(0.864 0.013 358.96);
  --color-tertiary-300: oklch(0.788 0.023 356.58);
  --color-tertiary-400: oklch(0.719 0.034 355.96);
  --color-tertiary-500: oklch(0.651 0.047 356.62);
  --color-tertiary-600: oklch(0.584 0.051 356.49);
  --color-tertiary-700: oklch(0.515 0.045 356.36);
  --color-tertiary-800: oklch(0.445 0.039 357.02);
  --color-tertiary-900: oklch(0.37 0.032 356.97);
  --color-tertiary-950: oklch(0.252 0.021 358.54);

  --color-error-50: oklch(0.968 0.013 17.52);
  --color-error-100: oklch(0.926 0.03 17.76);
  --color-error-200: oklch(0.852 0.065 18.53);
  --color-error-300: oklch(0.788 0.099 19.54);
  --color-error-400: oklch(0.716 0.147 21.42);
  --color-error-500: oklch(0.645 0.201 24.77);
  --color-error-600: oklch(0.568 0.2 26.41);
  --color-error-700: oklch(0.459 0.161 26.36);
  --color-error-800: oklch(0.359 0.127 26.47);
  --color-error-900: oklch(0.251 0.089 26.43);
  --color-error-950: oklch(0.197 0.069 26.37);

  /*
   * Stone — warm neutral scale
   *
   * Design principle: Basecamp-style warm whites.
   * 50 = pure white (surfaces, panels, cards)
   * 100 = warm off-white (page background, canvas)
   * 200+ = progressively darker for borders, muted UI, text
   *
   * Hue 60-70 gives a warm sandstone feel without going yellow.
   * Chroma is kept very low (<0.02) to stay neutral.
   */
  --color-stone-50:  oklch(1.000 0.000 0);       /* #ffffff — surfaces, panels, cards */
  --color-stone-100: oklch(0.980 0.007 70);       /* ~#fcf8f3 — page background (≈ Basecamp's page bg) */
  --color-stone-200: oklch(0.940 0.010 70);       /* ~#f0e9e1 — subtle UI backgrounds, hover states */
  --color-stone-300: oklch(0.880 0.008 60);       /* ~#d9d4cf — borders, dividers */
  --color-stone-400: oklch(0.720 0.010 56);       /* ~#aba5a0 — placeholder text, disabled */
  --color-stone-500: oklch(0.580 0.012 56);       /* ~#817a74 — muted text, icons */
  --color-stone-600: oklch(0.480 0.010 60);       /* ~#645e58 — secondary text */
  --color-stone-700: oklch(0.390 0.008 60);       /* ~#4a4540 — strong secondary text */
  --color-stone-800: oklch(0.300 0.006 50);       /* ~#352f2b — headings, emphasis */
  --color-stone-900: oklch(0.230 0.005 50);       /* ~#231f1c — primary body text */
  --color-stone-950: oklch(0.160 0.004 50);       /* ~#151210 — maximum contrast text */
  --color-black: #000;
  --color-white: #fff;
}

/* Indigo theme variation */
html[data-color-mode="indigo"],
[data-color-mode="indigo"] {
  /* Primary color - Indigo for focus and depth (only primary changes) */
  --color-primary-50: oklch(0.965 0.005 286.53);
  --color-primary-100: oklch(0.923 0.011 274.96);
  --color-primary-200: oklch(0.854 0.022 277.47);
  --color-primary-300: oklch(0.777 0.036 276.6);
  --color-primary-400: oklch(0.701 0.049 274.39);
  --color-primary-500: oklch(0.623 0.062 273.6);
  --color-primary-600: oklch(0.553 0.067 272.74);
  --color-primary-700: oklch(0.474 0.056 272.67);
  --color-primary-800: oklch(0.364 0.043 271.62);
  --color-primary-900: oklch(0.251 0.029 272.64);
  --color-primary-950: oklch(0.189 0.023 272.3);

  --color-secondary-50: oklch(0.956 0.005 286.52);
  --color-secondary-100: oklch(0.915 0.009 286.33);
  --color-secondary-200: oklch(0.828 0.021 285.99);
  --color-secondary-300: oklch(0.735 0.033 283.6);
  --color-secondary-400: oklch(0.65 0.044 283.6);
  --color-secondary-500: oklch(0.564 0.054 281.97);
  --color-secondary-600: oklch(0.478 0.061 281.5);
  --color-secondary-700: oklch(0.4 0.055 282.26);
  --color-secondary-800: oklch(0.311 0.043 281.77);
  --color-secondary-900: oklch(0.226 0.031 283.66);
  --color-secondary-950: oklch(0.178 0.025 279.91);

  --color-tertiary-50: oklch(0.953 0.052 123.82);
  --color-tertiary-100: oklch(0.909 0.067 123.26);
  --color-tertiary-200: oklch(0.823 0.06 123.33);
  --color-tertiary-300: oklch(0.737 0.054 123.42);
  --color-tertiary-400: oklch(0.652 0.048 123.11);
  --color-tertiary-500: oklch(0.567 0.042 124.22);
  --color-tertiary-600: oklch(0.48 0.035 122.04);
  --color-tertiary-700: oklch(0.395 0.029 123.49);
  --color-tertiary-800: oklch(0.309 0.023 121.63);
  --color-tertiary-900: oklch(0.224 0.017 122.76);
  --color-tertiary-950: oklch(0.177 0.014 120.79);

  /* Secondary, Tertiary, Stone, and Error colors remain the same as root */
}