/* ddocdoc (똑닥) color tokens
 * Source of truth: constants/colors.ts (+ tailwind.config.preset.js)
 * Use as CSS variables, e.g. color: var(--color-coolgray-900);
 */
:root {
  /* Base */
  --color-white: #ffffff;
  --color-black: #000000;

  /* Yellow — brand */
  --color-yellow-700: #ffdb00;
  --color-yellow-450: #ffe43f;
  --color-yellow-400: #ffed49;
  --color-yellow-100: #fff8b6;
  --color-yellow-50: #fffbdb;

  /* CoolGray — primary neutral / text */
  --color-coolgray-900: #2c3744;
  --color-coolgray-850: #36475a;
  --color-coolgray-800: #506073;
  --color-coolgray-700: #5f6972;
  --color-coolgray-500: #80878f;
  --color-coolgray-400: #959ba1;
  --color-coolgray-300: #abafb4;
  --color-coolgray-200: #e5e8eb;
  --color-coolgray-100: #edf0f3;
  --color-coolgray-50: #f5f7f9;
  --color-coolgray-10: #fbfcfd;

  /* NeutralGray */
  --color-neutralgray-900: #303133;
  --color-neutralgray-400: #939393;
  --color-neutralgray-300: #afafaf;
  --color-neutralgray-100: #dfdfdf;
  --color-neutralgray-50: #e5e5e5;

  /* FeedBackColor — error / alert (red) */
  --color-feedback-300: #f55251;
  --color-feedback-200: #f75e5f;
  --color-feedback-100: #fd857c;
  --color-feedback-50: #ffc5c0;
  --color-feedback-10: #fff0ef;

  /* Blue — info / link */
  --color-blue-300: #0077d1;
  --color-blue-50: #e7f6ff;
  --color-blue-10: #f4fbff;

  /* Green — success */
  --color-green-300: #77c700;
  --color-green-100: #bcdf71;
  --color-green-50: #edfad0;

  /* Orange — warning */
  --color-orange-300: #ffb444;
  --color-orange-100: #ffd699;
  --color-orange-50: #ffeaca;
  --color-orange-10: #fff3e0;

  /* DimmedEffect — overlay scrims */
  --color-dimmed-40: rgba(0, 0, 0, 0.4);
  --color-dimmed-4: rgba(0, 0, 0, 0.04);

  /* ── Semantic aliases ─────────────────────────────── */
  --color-brand: var(--color-yellow-700);
  --color-text-primary: var(--color-coolgray-900);
  --color-text-secondary: var(--color-coolgray-500);
  --color-text-disabled: var(--color-coolgray-300);
  --color-bg: var(--color-white);
  --color-bg-subtle: var(--color-coolgray-50);
  --color-border: var(--color-coolgray-200);
  --color-danger: var(--color-feedback-300);
  --color-info: var(--color-blue-300);
  --color-success: var(--color-green-300);
  --color-warning: var(--color-orange-300);
  --color-scrim: var(--color-dimmed-40);

  /* ── Component semantics (verified against Figma Component-Library) ── */
  /* Button fill is Yellow-400 (#FFED49), NOT the brand Yellow-700. */
  --color-button-primary: var(--color-yellow-400);
  --color-button-secondary: var(--color-coolgray-100);
  --color-button-line-border: var(--color-coolgray-200);
  --color-button-text: var(--color-coolgray-900);
  --radius-button: 8px; /* numbers/radius/xs */
}