@import url("/styles/fern-shared-chrome.css");

:root {
  /* === Exact fern-landing Base Colors === */
  --phrond-sundial-gold: #D8CAAC;
  --phrond-tile-title: #D8CAAC;
  --phrond-text-brand: #D8CAAC;

  /* === Fern Draw UI Tokens (Mapped directly to fern-landing) === */
  --fern-bg: var(--phrond-bg);
  --fern-header: var(--phrond-chassis-bg);
  --fern-toolbar: var(--phrond-surface-panel);
  --fern-menu: var(--phrond-chassis-bg);
  --fern-stage: var(--phrond-bg);
  --fern-panel: var(--phrond-surface-panel);
  --fern-surface: var(--phrond-tile-bg);
  --fern-surface-soft: rgba(255, 255, 255, 0.06);
  --fern-surface-muted: var(--phrond-tile-bg);

  --fern-border: var(--phrond-tile-border);
  --fern-border-strong: var(--phrond-tile-border);

  --fern-bg-strong: var(--phrond-tile-bg);
  --fern-bg-deep: var(--phrond-chassis-bg);

  --fern-text: var(--phrond-text-primary);
  --fern-text-muted: var(--phrond-text-muted);
  --fern-text-soft: var(--phrond-text-muted);
  --fern-text-on-light: var(--phrond-text-on-light);

  /* === Control & Button Tokens (Themeable for light/dark modes) === */
  --fern-control-bg: var(--phrond-surface-control);
  --fern-control-bg-hover: var(--phrond-surface-control-hover);
  --fern-control-bg-active: var(--phrond-surface-control-active);
  --fern-control-border: rgba(121, 113, 95, 0.45);
  --fern-control-border-hover: rgba(121, 113, 95, 0.75);
  --fern-control-border-active: rgba(121, 113, 95, 0.85);
  --fern-divider-border: rgba(121, 113, 95, 0.25);

  /* === Draw Highlight Accent: Slate Blueprint Blue (#223B59) === */
  --fern-accent: #223B59;
  --fern-accent-soft: #5A7EA8;
  --fern-accent-pale: #8BA9CE;
  --fern-accent-deep: #16263B;
  --fern-selected: rgba(34, 59, 89, 0.45);

  --color-red-main: #a03845;
  --color-red-dark: #6b0e19;
  --fern-danger: #a03845;
  --fern-danger-deep: #6b0e19;
  --fern-primary: #223B59;
  --fern-primary-border: #5A7EA8;
  --fern-text-inverse: #ffffff;
  --fern-shadow: rgba(0, 0, 0, 0.5);
  --fern-overlay: var(--phrond-overlay);
}