/* ============================================================================
 * SEOGrove Theme
 *
 * SINGLE SOURCE OF TRUTH for all color and visual tokens in the application.
 * Nothing else in the app should hardcode a color value. If you need a color
 * that doesn't exist here yet, add it here first.
 *
 * Switching themes (dark mode, rebrand, white-label) should be a change to
 * this file and nothing else.
 *
 * ------------------------------------------------------------------------
 * Naming convention
 * ------------------------------------------------------------------------
 *   --color-<role>-<variant>
 *
 *   Roles describe *purpose*, not appearance. Prefer --color-surface over
 *   --color-white, --color-accent over --color-green. This is what lets us
 *   reskin later without touching templates.
 *
 *   Variants: default (no suffix), muted, strong, inverted.
 *
 * ------------------------------------------------------------------------
 * Tailwind v4 integration
 * ------------------------------------------------------------------------
 *   The @theme block below makes each token available as a Tailwind utility.
 *   So `--color-surface` becomes `bg-surface`, `text-surface`, etc.
 *   Use Tailwind classes in templates — never inline hex values.
 * ========================================================================= */

:root {
  /* Brand — SEOGrove's signature green. Trust, growth, organic traffic. */
  --color-brand:           oklch(0.64 0.17 152);  /* primary brand green */
  --color-brand-strong:    oklch(0.54 0.18 152);  /* hover / pressed */
  --color-brand-muted:     oklch(0.92 0.05 152);  /* subtle brand tint */

  /* Accent — warm counterpoint used sparingly for CTAs and highlights */
  --color-accent:          oklch(0.72 0.15 60);
  --color-accent-strong:   oklch(0.62 0.16 60);

  /* Surfaces — backgrounds, layered from deepest to lightest */
  --color-canvas:          oklch(0.985 0.003 150);  /* page background */
  --color-surface:         oklch(1    0     0);     /* cards, panels */
  --color-surface-raised:  oklch(0.99 0.003 150);   /* modals, popovers */
  --color-surface-sunken:  oklch(0.96 0.005 150);   /* wells, input backgrounds */

  /* Text — hierarchical, on light surfaces */
  --color-text:            oklch(0.24 0.02 250);   /* primary body text */
  --color-text-muted:      oklch(0.48 0.015 250);  /* secondary / captions */
  --color-text-subtle:     oklch(0.62 0.01 250);   /* tertiary / placeholders */
  --color-text-inverted:   oklch(0.98 0    0);     /* on dark surfaces */

  /* Borders and dividers */
  --color-border:          oklch(0.90 0.01 250);
  --color-border-strong:   oklch(0.82 0.015 250);

  /* Status — feedback for pipeline jobs, form validation, citations */
  --color-success:         oklch(0.68 0.17 150);
  --color-warning:         oklch(0.78 0.16 80);
  --color-danger:          oklch(0.62 0.22 27);
  --color-info:            oklch(0.66 0.14 240);

  /* Elevation — shadows */
  --shadow-sm:  0 1px 2px 0 oklch(0.2 0.02 250 / 0.05);
  --shadow-md:  0 4px 6px -1px oklch(0.2 0.02 250 / 0.08), 0 2px 4px -2px oklch(0.2 0.02 250 / 0.06);
  --shadow-lg:  0 10px 15px -3px oklch(0.2 0.02 250 / 0.10), 0 4px 6px -4px oklch(0.2 0.02 250 / 0.08);

  /* Radius — one scale, used everywhere */
  --radius-sm:  0.375rem;
  --radius-md:  0.625rem;
  --radius-lg:  0.875rem;
  --radius-xl:  1.25rem;
}

/* Tailwind v4 — expose tokens as utilities (bg-brand, text-text-muted, etc.) */
@theme {
  --color-brand:           var(--color-brand);
  --color-brand-strong:    var(--color-brand-strong);
  --color-brand-muted:     var(--color-brand-muted);

  --color-accent:          var(--color-accent);
  --color-accent-strong:   var(--color-accent-strong);

  --color-canvas:          var(--color-canvas);
  --color-surface:         var(--color-surface);
  --color-surface-raised:  var(--color-surface-raised);
  --color-surface-sunken:  var(--color-surface-sunken);

  --color-text:            var(--color-text);
  --color-text-muted:      var(--color-text-muted);
  --color-text-subtle:     var(--color-text-subtle);
  --color-text-inverted:   var(--color-text-inverted);

  --color-border:          var(--color-border);
  --color-border-strong:   var(--color-border-strong);

  --color-success:         var(--color-success);
  --color-warning:         var(--color-warning);
  --color-danger:          var(--color-danger);
  --color-info:            var(--color-info);

  --radius-sm:  var(--radius-sm);
  --radius-md:  var(--radius-md);
  --radius-lg:  var(--radius-lg);
  --radius-xl:  var(--radius-xl);
}