/* leaf ecosystem tokens
   Source: docs/design-system/MASTER_ECOSISTEMA_LEAF.md
   Layers: primitives -> semantics -> components -> compatibility aliases. */

/* 1. Local fonts */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/EBGaramond-VariableFont_wght.ttf') format('truetype-variations'),
       url('../fonts/EBGaramond-VariableFont_wght.ttf') format('truetype'),
       url('../fonts/eb-garamond-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/EBGaramond-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('../fonts/EBGaramond-Italic-VariableFont_wght.ttf') format('truetype'),
       url('../fonts/eb-garamond-italic-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/manrope.woff2') format('woff2');
}

:root {
  /* 2. Primitives */
  --leaf-color-cream-100: #fbf8f0;
  --leaf-color-cream-200: #f5f1e8;
  --leaf-color-cream-300: #efe9da;
  --leaf-color-sand-400: #ddd4c3;
  --leaf-color-ink-900: #111111;
  --leaf-color-ink-800: #1d1d1b;
  --leaf-color-ink-600: #6b6a63;
  --leaf-color-ink-500: #8a8980;
  --leaf-color-forest-950: #0f3326;
  --leaf-color-forest-900: #123d2d;
  --leaf-color-sage-200: #dde8db;
  --leaf-color-wine-700: #8b2230;
  --leaf-color-gold-200: #f5e8a9;
  --leaf-color-gold-600: #8d742d;
  --leaf-color-code-900: #26362e;
  --leaf-color-code-100: #edf2ed;
  --leaf-color-rule-dark: rgb(17 17 17 / 10%);
  --leaf-color-rule-strong: rgb(17 17 17 / 15%);
  --leaf-color-overlay-light: rgb(17 17 17 / 42%);
  --leaf-color-white-alpha-35: rgb(255 255 255 / 35%);
  --leaf-color-white-alpha-40: rgb(255 255 255 / 40%);
  --leaf-color-white-alpha-72: rgb(255 255 255 / 72%);
  --leaf-color-white: #ffffff;
  --leaf-color-google-blue: #4285f4;
  --leaf-color-google-green: #34a853;
  --leaf-color-google-yellow: #fbbc05;
  --leaf-color-google-red: #ea4335;
  /* Subject icon tints: muted, paper-like swatches derived from the brand palette. */
  --leaf-tint-forest: #dde8db;
  --leaf-tint-forest-ink: #123d2d;
  --leaf-tint-gold: #f3e9c4;
  --leaf-tint-gold-ink: #6f5a1f;
  --leaf-tint-wine: #f1dcdc;
  --leaf-tint-wine-ink: #7a2430;
  --leaf-tint-sky: #dfe7e6;
  --leaf-tint-sky-ink: #2f4f4c;
  --leaf-tint-clay: #efdfd0;
  --leaf-tint-clay-ink: #6b4224;
  --leaf-tint-plum: #e6dfe8;
  --leaf-tint-plum-ink: #4d3655;

  --leaf-dark-canvas: #0e0e0d;
  --leaf-dark-surface: #171716;
  --leaf-dark-surface-alt: #201f1d;
  --leaf-dark-border: #302e2a;
  --leaf-dark-rule: rgb(245 241 232 / 10%);
  --leaf-dark-primary: #8fbfa4;
  --leaf-dark-primary-soft: #a8cfb8;
  --leaf-dark-primary-tint: rgb(143 191 164 / 12%);
  --leaf-dark-on-primary: #0e1a14;
  --leaf-dark-sage: #25332b;
  --leaf-dark-text: #f2efe7;
  --leaf-dark-text-muted: #9a9890;
  --leaf-dark-text-faint: #7c7a73;
  --leaf-dark-negative: #d18a94;
  --leaf-dark-negative-tint: rgb(209 138 148 / 12%);
  --leaf-dark-overlay: rgb(0 0 0 / 62%);

  --leaf-space-1: 4px;
  --leaf-space-2: 8px;
  --leaf-space-3: 12px;
  --leaf-space-4: 16px;
  --leaf-space-5: 20px;
  --leaf-space-6: 24px;
  --leaf-space-7: 28px;
  --leaf-space-8: 32px;
  --leaf-space-10: 40px;
  --leaf-space-12: 48px;
  --leaf-space-14: 56px;
  --leaf-space-16: 64px;

  --leaf-radius-xs: 4px;
  --leaf-radius-sm: 8px;
  --leaf-radius-md: 10px;
  --leaf-radius-lg: 12px;
  --leaf-radius-xl: 16px;
  --leaf-radius-modal: 18px;
  --leaf-radius-pill: 999px;

  --leaf-shadow-card: 0 10px 24px rgb(17 17 17 / 5%);
  --leaf-shadow-modal: 0 24px 40px rgb(17 17 17 / 18%);
  --leaf-shadow-cta: 0 8px 18px rgb(18 61 45 / 22%);
  --leaf-shadow-overlay-soft: 0 12px 30px rgb(17 17 17 / 8%);
  --leaf-shadow-hairline: 0 1px 2px rgb(17 17 17 / 5%);
  --leaf-shadow-popover: 0 1px 2px rgb(17 17 17 / 6%), 0 14px 34px -6px rgb(17 17 17 / 16%);
  --leaf-shadow-toolbar: 0 1px 2px rgb(17 17 17 / 5%), 0 8px 22px -10px rgb(17 17 17 / 18%);

  --leaf-motion-instant: 120ms;
  --leaf-motion-fast: 180ms;
  --leaf-motion-normal: 250ms;
  --leaf-motion-slow: 350ms;
  --leaf-motion-page: 420ms;
  --leaf-ease-arrive: cubic-bezier(.22, 1, .36, 1);
  --leaf-ease-exit: cubic-bezier(.4, 0, 1, 1);
  --leaf-ease-standard: ease;

  --leaf-font-display: 'EB Garamond', Georgia, serif;
  --leaf-font-ui: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --leaf-font-data: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace;

  --leaf-z-content: 0;
  --leaf-z-sticky: 20;
  --leaf-z-menu: 40;
  --leaf-z-overlay: 100;
  --leaf-z-dialog: 110;

  /* 3. Light semantic tokens */
  --color-canvas: var(--leaf-color-cream-200);
  --color-canvas-soft: var(--leaf-color-cream-100);
  --color-surface: var(--leaf-color-cream-100);
  --color-surface-alt: var(--leaf-color-cream-300);
  --color-surface-translucent: color-mix(in srgb, var(--color-surface) 76%, transparent);
  --color-border: var(--leaf-color-sand-400);
  --color-rule: var(--leaf-color-rule-dark);
  --color-rule-strong: var(--leaf-color-rule-strong);
  --color-text-primary: var(--leaf-color-ink-900);
  --color-text-longform: var(--leaf-color-ink-800);
  --color-text-muted: var(--leaf-color-ink-600);
  --color-text-faint: var(--leaf-color-ink-500);
  --color-action-primary: var(--leaf-color-forest-900);
  --color-action-primary-hover: var(--leaf-color-forest-950);
  --color-action-on-primary: var(--leaf-color-cream-200);
  --color-action-primary-tint: color-mix(in srgb, var(--color-action-primary) 8%, transparent);
  --color-action-primary-tint-strong: color-mix(in srgb, var(--color-action-primary) 14%, transparent);
  --color-feedback-error: var(--leaf-color-wine-700);
  --color-feedback-error-tint: color-mix(in srgb, var(--color-feedback-error) 8%, transparent);
  --color-feedback-saving: var(--leaf-color-gold-600);
  --color-action-danger: var(--leaf-color-wine-700);
  --color-action-danger-tint: var(--color-feedback-error-tint);
  --color-selection: var(--color-action-primary);
  --color-highlight: var(--leaf-color-gold-200);
  --color-code-surface: var(--leaf-color-code-900);
  --color-code-text: var(--leaf-color-code-100);
  --color-overlay: var(--leaf-color-overlay-light);
  --color-focus-ring: color-mix(in srgb, var(--color-action-primary) 50%, transparent);

  --type-display: var(--leaf-font-display);
  --type-ui: var(--leaf-font-ui);
  --type-data: var(--leaf-font-data);
  --type-notes-editor-body: var(--type-display);
  --type-notes-ai-longform: var(--type-display);

  --space-control-inline: var(--leaf-space-4);
  --space-card: var(--leaf-space-4);
  --space-section: var(--leaf-space-8);
  --radius-field: var(--leaf-radius-sm);
  --radius-control: var(--leaf-radius-lg);
  --radius-card: var(--leaf-radius-xl);
  --radius-dialog: var(--leaf-radius-modal);
  --radius-pill: var(--leaf-radius-pill);
  --shadow-card: var(--leaf-shadow-card);
  --shadow-dialog: var(--leaf-shadow-modal);
  --shadow-cta: var(--leaf-shadow-cta);
  --motion-fast: var(--leaf-motion-fast) var(--leaf-ease-standard);
  --motion-normal: var(--leaf-motion-normal) var(--leaf-ease-arrive);
  --motion-slow: var(--leaf-motion-slow) var(--leaf-ease-arrive);
  --shadow-popover: var(--leaf-shadow-popover);
  --shadow-toolbar: var(--leaf-shadow-toolbar);
  --shadow-hairline: var(--leaf-shadow-hairline);
  --color-sidebar: color-mix(in srgb, var(--leaf-color-cream-300) 72%, var(--leaf-color-cream-200));
  --color-hover: color-mix(in srgb, var(--leaf-color-ink-900) 5%, transparent);
  --color-pressed: color-mix(in srgb, var(--leaf-color-ink-900) 9%, transparent);
  --color-on-dark: var(--leaf-color-white);
  --sidebar-width: 264px;
  --topbar-height: 56px;
  --page-max: 1040px;
  --reading-max: 720px;

  /* 4. Component tokens */
  --button-primary-bg: var(--color-action-primary);
  --button-primary-bg-hover: var(--color-action-primary-hover);
  --button-primary-fg: var(--color-action-on-primary);
  --button-primary-radius: var(--radius-pill);
  --button-primary-shadow: var(--shadow-cta);
  --button-secondary-bg: var(--color-surface-translucent);
  --button-secondary-bg-hover: var(--color-surface);
  --button-secondary-fg: var(--color-text-primary);
  --button-secondary-border: var(--color-border);
  --button-ghost-fg: var(--color-text-muted);
  --button-danger-fg: var(--color-action-danger);
  --button-danger-bg: var(--color-action-danger-tint);
  --icon-button-size: 44px;
  --field-bg: var(--color-surface-alt);
  --field-border: var(--color-border);
  --field-focus-ring: var(--color-focus-ring);
  --field-radius: var(--radius-field);
  --card-bg: var(--color-surface);
  --card-border: var(--color-rule);
  --card-radius: var(--radius-card);
  --card-shadow: var(--shadow-card);
  --list-row-border: var(--color-rule);
  --list-row-hover: var(--color-surface-translucent);
  --dialog-bg: var(--color-surface);
  --dialog-border: var(--color-border);
  --dialog-overlay: var(--color-overlay);
  --dialog-radius: var(--radius-dialog);
  --dialog-shadow: var(--shadow-dialog);
  --editor-paper: var(--color-surface);
  --editor-text: var(--color-text-longform);
  --editor-rule: var(--color-rule);
  --editor-highlight: var(--color-highlight);
  --editor-code-bg: var(--color-code-surface);
  --editor-code-fg: var(--color-code-text);
  --editor-body-size: 17px;
  --editor-body-leading: 1.85;
  --ai-panel-bg: var(--color-surface);
  --ai-panel-tint: var(--color-action-primary-tint);
  --status-error-fg: var(--color-feedback-error);
  --status-error-bg: var(--color-feedback-error-tint);
  --status-saving-fg: var(--color-feedback-saving);
}

/* Prepared only. No public theme control is wired to this selector. */
:root[data-leaf-theme='dark'] {
  --color-canvas: var(--leaf-dark-canvas);
  --color-canvas-soft: var(--leaf-dark-surface);
  --color-surface: var(--leaf-dark-surface);
  --color-surface-alt: var(--leaf-dark-surface-alt);
  --color-border: var(--leaf-dark-border);
  --color-rule: var(--leaf-dark-rule);
  --color-rule-strong: color-mix(in srgb, var(--leaf-dark-text) 16%, transparent);
  --color-text-primary: var(--leaf-dark-text);
  --color-text-longform: var(--leaf-dark-text);
  --color-text-muted: var(--leaf-dark-text-muted);
  --color-text-faint: var(--leaf-dark-text-faint);
  --color-action-primary: var(--leaf-dark-primary);
  --color-action-primary-hover: var(--leaf-dark-primary-soft);
  --color-action-on-primary: var(--leaf-dark-on-primary);
  --color-action-primary-tint: var(--leaf-dark-primary-tint);
  --color-action-danger: var(--leaf-dark-negative);
  --color-action-danger-tint: var(--leaf-dark-negative-tint);
  --color-feedback-error: var(--leaf-dark-negative);
  --color-feedback-error-tint: var(--leaf-dark-negative-tint);
  --color-overlay: var(--leaf-dark-overlay);
}

:root {
  /* 5. Temporary compatibility aliases. Keep contracts; remove as selectors migrate. */
  --bg0: var(--color-canvas);
  --bg0-light: var(--color-canvas-soft);
  --bg0-dark: var(--color-surface-alt);
  --bg1: var(--color-border);
  --bg2: color-mix(in srgb, var(--color-border) 84%, var(--color-text-muted));
  --bg3: var(--color-text-faint);
  --border: var(--color-border);
  --text: var(--color-text-primary);
  --text2: var(--color-text-muted);
  --text3: var(--color-text-faint);
  --blue: var(--color-action-primary);
  --blue-h: var(--color-action-primary-hover);
  --blue-d: var(--color-action-primary-tint-strong);
  --sage: var(--leaf-color-sage-200);
  --sage-d: color-mix(in srgb, var(--leaf-color-sage-200) 60%, transparent);
  --red: var(--color-feedback-error);
  --red-d: var(--color-feedback-error-tint);
  --serif: var(--type-display);
  --sans: var(--type-ui);
  --mono: var(--type-data);
  --cream: var(--color-canvas);
  --cream-deep: var(--color-surface-alt);
  --paper: var(--color-surface);
  --ink: var(--color-text-primary);
  --ink-soft: var(--color-text-longform);
  --muted: var(--color-text-muted);
  --muted-2: var(--color-text-faint);
  --rule: var(--color-rule);
  --rule-strong: var(--color-rule-strong);
  --forest: var(--color-action-primary);
  --forest-soft: var(--color-action-primary-tint);
  --sand: var(--color-border);
  --danger: var(--color-action-danger);
  --danger-soft: var(--color-action-danger-tint);
  --r: var(--radius-control);
  --r-xs: var(--leaf-radius-xs);
  --r-sm: var(--leaf-radius-sm);
  --r-md: var(--leaf-radius-md);
  --r-lg: var(--leaf-radius-lg);
  --r-xl: var(--leaf-radius-xl);
  --r-2xl: var(--leaf-radius-modal);
  --r-pill: var(--leaf-radius-pill);
  --s-1: var(--leaf-space-1);
  --s-2: var(--leaf-space-2);
  --s-3: var(--leaf-space-3);
  --s-4: var(--leaf-space-4);
  --s-5: var(--leaf-space-5);
  --s-6: var(--leaf-space-6);
  --s-7: var(--leaf-space-7);
  --s-8: var(--leaf-space-8);
  --s-10: var(--leaf-space-10);
  --s-12: var(--leaf-space-12);
  --s-14: var(--leaf-space-14);
  --s-16: var(--leaf-space-16);
  --shadow-inset: 0 1px 0 color-mix(in srgb, var(--color-surface) 50%, transparent) inset;
  --shadow-soft: var(--leaf-shadow-card);
  --shadow-card: var(--leaf-shadow-card);
  --shadow-hover: var(--leaf-shadow-overlay-soft);
  --shadow-cta: var(--leaf-shadow-cta);
  --shadow-modal: var(--leaf-shadow-modal);
  --t: var(--motion-fast);
  --t-fast: var(--motion-fast);
  --t-med: var(--motion-normal);
  --t-slow: var(--motion-slow);
  --t-page: var(--motion-slow);
  --leaf-canvas: var(--color-canvas);
  --leaf-canvas-deep: var(--color-surface-alt);
  --leaf-surface: var(--color-surface);
  --leaf-surface-muted: var(--color-surface-alt);
  --leaf-ink: var(--color-text-primary);
  --leaf-muted: var(--color-text-muted);
  --leaf-subtle: var(--color-text-faint);
  --leaf-line: var(--color-rule);
  --leaf-line-strong: var(--color-rule-strong);
  --leaf-green: var(--color-action-primary);
  --leaf-green-hover: var(--color-action-primary-hover);
  --leaf-green-soft: var(--color-action-primary-tint);
  --leaf-focus: var(--color-action-primary);
  --leaf-danger: var(--color-action-danger);
  --leaf-shadow-sm: var(--leaf-shadow-card);
  --leaf-shadow-md: var(--leaf-shadow-modal);
}