/* =========================================================
   İSTANBUL PİLİÇ — COLOR TOKENS

   Core tokens mirror the exported Figma variable paths exactly.
   Figma's slash hierarchy is CSS-normalized as a hyphen:
   `sage/50` → `--sage-50`.

   Components should use the semantic aliases below instead of
   assigning new color values.
   ========================================================= */

:root {
  /* Core · sage */
  --sage-50: #F2F7F3;
  --sage-100: #E9F7EB;
  --sage-200: #D6F0DB;
  --sage-300: #C5E7CB;
  --sage-500: #9BDDA6;
  --sage-600: #69AF74;
  --sage-700: #407249;

  /* Core · coral */
  --coral-50: #F7EFED;
  --coral-100: #FEEAE7;
  --coral-200: #FCCDC5;
  --coral-300: #FAB4A8;
  --coral-500: #F89C8C;
  --coral-600: #D95A43;
  --coral-700: #8F3A2B;

  /* Core · butter */
  --butter-50: #F7F5ED;
  --butter-100: #FDF9E2;
  --butter-200: #FBF2C5;
  --butter-300: #F9EBAA;
  --butter-500: #F6E593;
  --butter-600: #D8B04A;
  --butter-700: #A68124;

  /* Core · neutral */
  --neutral-100: #FDFBF8;
  --neutral-200: #F2EFE9;
  --neutral-400: #A6A39D;
  --neutral-700: #45423C;
  --neutral-900: #29261E;

  /* Semantic · surfaces */
  --color-background-page: var(--neutral-100);
  --color-background-elevated: var(--neutral-100);
  --color-background-dark: var(--neutral-900);
  --color-background-dark-deep: var(--neutral-900);
  --color-background-sage-subtle: var(--sage-50);
  --color-background-coral-subtle: var(--coral-100);
  --color-background-butter-subtle: var(--butter-100);
  --color-background-muted: var(--neutral-200);

  /* Semantic · content */
  --color-text-primary: var(--neutral-900);
  --color-text-secondary: var(--neutral-700);
  --color-text-muted: var(--neutral-400);
  --color-text-on-dark: var(--neutral-100);
  --color-text-on-dark-muted: var(--neutral-400);

  /* Semantic · brand and interaction */
  --color-action-primary: var(--sage-700);
  --color-action-primary-hover: var(--sage-700);
  --color-accent-coral: var(--coral-600);
  --color-accent-coral-strong: var(--coral-700);
  --color-accent-coral-soft: var(--coral-300);
  --color-accent-butter: var(--butter-700);
  --color-accent-butter-strong: var(--butter-700);
  --color-accent-butter-soft: var(--butter-500);

  /* Semantic · borders and overlays */
  --color-border-accent: var(--sage-200);
  --color-border-muted: var(--neutral-400);
  --color-line-soft: color-mix(in srgb, var(--neutral-900) 14%, transparent);
  --color-line-strong: color-mix(in srgb, var(--neutral-900) 55%, transparent);
  --color-line-on-dark: color-mix(in srgb, var(--neutral-100) 18%, transparent);
  --color-overlay-on-dark-soft: color-mix(in srgb, var(--neutral-100) 12%, transparent);

  /* Existing component aliases · all resolve through semantic/core tokens */
  --paper: var(--color-background-page);
  --paper-2: var(--color-background-elevated);
  --white: var(--color-background-elevated);
  --charcoal: var(--color-background-dark);
  --charcoal-2: var(--color-background-dark-deep);
  --ink: var(--color-text-primary);
  --ink-soft: var(--color-text-secondary);
  --bone: var(--color-text-on-dark);
  --bone-soft: var(--color-text-on-dark-muted);
  --muted: var(--color-text-muted);
  --green: var(--color-action-primary);
  --green-deep: var(--color-action-primary-hover);
  --green-soft: var(--color-border-accent);
  --green-rule: var(--color-border-accent);
  --green-wash: var(--color-background-sage-subtle);
  --green-light: var(--color-background-sage-subtle);
  --ember: var(--color-accent-coral);
  --ember-deep: var(--color-accent-coral-strong);
  --ember-soft: var(--color-accent-coral-soft);
  --ember-wash: var(--color-background-coral-subtle);
  --blush: var(--color-accent-coral-soft);
  --ochre: var(--color-accent-butter);
  --ochre-deep: var(--color-accent-butter-strong);
  --ochre-soft: var(--color-accent-butter-soft);
  --ochre-wash: var(--color-background-butter-subtle);
  --butter: var(--color-accent-butter-soft);
  --sage: var(--color-border-muted);
  --sage-soft: var(--color-background-muted);
  --line-soft: var(--color-line-soft);
  --line-strong: var(--color-line-strong);
  --line-dark: var(--color-line-on-dark);
}