/* Elegance IV — Color tokens
   Palette: warm neutral greige system. No blues/purples/gradients.
   Base values first, semantic aliases below. */

:root {
  /* Base palette (from brand spec) */
  --c-white: #FDFDFD;
  --c-gray-light: #D4D4D3;
  --c-greige: #A0997E;      /* principal */
  --c-warm-gray: #BCBAB4;
  --c-taupe: #6D645C;
  --c-graphite: #302A27;

  /* Extended tints/shades derived in oklch for hover/press/border states,
     kept within the same warm-neutral family as the base palette */
  --c-greige-50:  oklch(from var(--c-greige) 0.97 0.006 90);
  --c-greige-100: oklch(from var(--c-greige) 0.92 0.012 90);
  --c-greige-300: oklch(from var(--c-greige) 0.80 0.020 90);
  --c-greige-500: var(--c-greige);
  --c-greige-600: oklch(from var(--c-greige) 0.55 0.024 90);
  --c-greige-700: oklch(from var(--c-greige) 0.45 0.022 90);

  --c-taupe-400: oklch(from var(--c-taupe) 0.55 0.020 70);
  --c-taupe-500: var(--c-taupe);
  --c-taupe-700: oklch(from var(--c-taupe) 0.30 0.018 70);

  --c-graphite-600: oklch(from var(--c-graphite) 0.32 0.010 60);
  --c-graphite-900: var(--c-graphite);

  /* Metallic accent — sampled from the logo. On the restrained core brand
     (guidelines/, proposal template) keep this rare: a rule, an icon
     stroke, a link on dark. The premium marketing site (site-home /
     profession-page templates) elevates it to a full accent per that
     brief's explicit "Branco, Off-white, Dourado elegante, Preto" spec —
     used there for CTAs, hover glow, and icon strokes, still never as a
     large flat fill. */
  --c-gold: #B8974E;
  --c-gold-soft: #D8C08A;
  --c-gold-deep: #8F7233;
  --c-off-white: #F7F5F0;

  /* Glass surfaces — used only on the premium marketing site templates */
  --surface-glass: oklch(1 0 0 / 0.55);
  --surface-glass-dark: oklch(0.2 0.01 60 / 0.45);
  --border-glass: oklch(1 0 0 / 0.4);
  --blur-glass: 16px;

  /* ============ Semantic aliases ============ */

  /* Surfaces */
  --surface-page: var(--c-white);
  --surface-section-alt: var(--c-gray-light);
  --surface-section-dark: var(--c-graphite);
  --surface-card: var(--c-white);
  --surface-card-tinted: var(--c-greige-50);
  --surface-inverse: var(--c-graphite);
  --surface-accent: var(--c-greige);

  /* Text */
  --text-primary: var(--c-graphite);
  --text-secondary: var(--c-taupe-500);
  --text-muted: var(--c-taupe-400);
  --text-inverse: var(--c-white);
  --text-on-accent: var(--c-white);
  --text-gold: var(--c-gold);

  /* Borders */
  --border-subtle: var(--c-gray-light);
  --border-default: var(--c-warm-gray);
  --border-strong: var(--c-taupe-500);
  --border-inverse: oklch(from var(--c-white) 1 0 0 / 0.18);

  /* Links */
  --link-color: var(--c-taupe-700);
  --link-hover: var(--c-graphite);
  --link-inverse: var(--c-gray-light);
  --link-inverse-hover: var(--c-white);

  /* Interactive — primary (greige) */
  --btn-primary-bg: var(--c-graphite);
  --btn-primary-bg-hover: var(--c-graphite-600);
  --btn-primary-bg-press: #000000;
  --btn-primary-text: var(--c-white);

  --btn-secondary-bg: transparent;
  --btn-secondary-border: var(--c-graphite);
  --btn-secondary-text: var(--c-graphite);
  --btn-secondary-bg-hover: var(--c-graphite);
  --btn-secondary-text-hover: var(--c-white);

  --btn-ghost-text: var(--c-taupe-700);
  --btn-ghost-text-hover: var(--c-graphite);

  --focus-ring: var(--c-greige-700);
}