/* ── Medono color tokens ─────────────────────────────────────────
   White base. Accents: ink-black and brand blue, as in the logo.
   The signature gradient runs dark navy → steel blue (logo "MED"). */
:root {
  /* Base blues (sampled from logo gradient) */
  --blue-950: #081119;
  --blue-900: #0A1B2A;
  --blue-800: #10304A;
  --blue-700: #17466B;
  --blue-600: #1B598A;
  --blue-500: #1E6FA8;   /* primary brand blue */
  --blue-400: #4C90BE;
  --blue-300: #85B4D4;
  --blue-200: #BAD4E6;
  --blue-100: #E1EDF5;
  --blue-50:  #F2F7FB;

  /* Neutrals (ink black of "ONO" + cool grays) */
  --ink-900: #16181A;
  --ink-700: #33383D;
  --ink-500: #5A6570;
  --ink-400: #7C8894;
  --ink-300: #AEB9C2;
  --ink-200: #D5DCE2;
  --ink-100: #EAEEF1;
  --ink-50:  #F6F8F9;
  --white:   #FFFFFF;

  /* Signature gradients */
  --grad-brand: linear-gradient(120deg, var(--blue-950) 0%, var(--blue-700) 55%, var(--blue-500) 100%);
  --grad-brand-soft: linear-gradient(120deg, var(--blue-50) 0%, var(--white) 60%);
  --grad-ink: linear-gradient(120deg, #000000 0%, var(--blue-800) 60%, var(--blue-500) 100%);

  /* Semantic — surfaces */
  --surface-page: var(--white);
  --surface-raised: var(--white);
  --surface-tint: var(--blue-50);
  --surface-dark: var(--blue-900);

  /* Semantic — text */
  --text-heading: var(--ink-900);
  --text-body: var(--ink-500);
  --text-muted: var(--ink-400);
  --text-on-dark: var(--white);
  --text-on-dark-muted: rgba(255, 255, 255, 0.68);
  --text-accent: var(--blue-500);

  /* Semantic — interactive */
  --accent: var(--blue-500);
  --accent-hover: var(--blue-600);
  --accent-press: var(--blue-700);
  --focus-ring: rgba(30, 111, 168, 0.35);

  /* Semantic — lines */
  --border-subtle: var(--ink-100);
  --border-strong: var(--ink-200);
  --border-on-dark: rgba(255, 255, 255, 0.14);

  /* Feedback */
  --success: #1E8A5B;
  --success-tint: #E6F4EE;
  --warning: #B97A16;
  --warning-tint: #FBF3E3;
  --danger: #C03A3A;
  --danger-tint: #FAEAEA;
}