/**
 * WellCore design tokens — editorial adaptation.
 *
 * Translated from WellCore Style Guide 1.1 and the frontend implementation at
 * Wellcore-CRM/frontend @ 057e731 (src/styles/tokens.css). Values are carried
 * over, not reinvented; the additions here are the ones long-form reading needs
 * and the product UI does not have (measure, editorial type scale, hero ratios).
 *
 * Rule inherited from the frontend: no template or component references a raw
 * hex or pixel value. Every visual decision passes through a var declared here.
 */

:root {
  /* ====== Brand ======================================================== */
  /* Ecstasy. Decorative only — 2.77:1 on white, so never behind small text. */
  --wc-brand-primary: #f67723;
  /* Ecstasy darkened. 4.71:1 on white — this is the one used for text,
     buttons and focus rings. Style Guide 1.1 correction to the button token. */
  --wc-brand-primary-dark: #c84b00;
  /* Cerise. Closes the gradient; never a success or error state. */
  --wc-brand-secondary: #dd3c8c;

  /* ====== Surfaces ===================================================== */
  --wc-bg-base: #ffffff;      /* Cards and reading surfaces */
  --wc-bg-subtle: #fbfaf9;    /* Pampas — page canvas */
  --wc-bg-strong: #2c2421;    /* Cocoa — footer, always-dark surfaces */
  --wc-border-subtle: #e9e6e2;
  --wc-border-muted: #c5c1b9;

  --wc-surface-canvas: var(--wc-bg-subtle);

  /* ====== Text ========================================================= */
  --wc-text-primary: #2c2421;   /* Cocoa */
  --wc-text-secondary: #7a6860; /* 5.28:1 on white */
  --wc-text-inverse: #ffffff;
  --wc-text-on-brand: #ffffff;
  /* Style Guide 1.1 records --color-text-muted (#7e7270) at 4.45:1 on Pampas,
     which fails AA and must not be rounded up. Editorial metadata sits on the
     Pampas canvas, so this theme resolves "muted" to the measured secondary
     rather than shipping the known failure. */
  --wc-text-muted: var(--wc-text-secondary);

  /* ====== Module accents ==============================================
     Category colour only. Never repurposed as success/error/urgency. */
  --wc-accent-blue: #308ce8;   /* Agenda */
  --wc-accent-green: #2bab6f;  /* Pipeline comercial */
  --wc-accent-orange: #fe7b02; /* Financeiro */
  --wc-accent-red: #dc2828;    /* Automações / IA */

  /* ====== Typography ===================================================
     DM Sans for display and Inter for body are the brand defaults recorded in
     Style Guide 1.1. Ghost 6 lets a publisher choose fonts in Admin and injects
     --gh-font-heading / --gh-font-body; those are honoured when set, and the
     brand families remain the fallback when they are not. Changing them in
     Admin is a brand decision, not a technical one. */
  --wc-font-display: var(--gh-font-heading, 'DM Sans'), system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wc-font-body: var(--gh-font-body, 'Inter'), system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wc-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  --wc-text-xs: 0.75rem;    /* 12 */
  --wc-text-sm: 0.875rem;   /* 14 */
  --wc-text-base: 1rem;     /* 16 */
  --wc-text-lg: 1.125rem;   /* 18 — article lead */
  --wc-text-xl: 1.25rem;    /* 20 */
  --wc-text-2xl: 1.5rem;    /* 24 */
  --wc-text-3xl: 2.25rem;   /* 36 */
  --wc-text-4xl: 3rem;      /* 48 — article title desktop */

  /* Editorial body is set larger than product body: 18px at 1.75 is the
     reading size, not the 16/24 used in dense product screens. */
  --wc-article-size: var(--wc-text-lg);

  --wc-leading-tight: 1.1;
  --wc-leading-snug: 1.25;
  --wc-leading-normal: 1.5;
  --wc-leading-relaxed: 1.75;

  --wc-tracking-tight: -0.025em;
  --wc-tracking-normal: 0;
  --wc-tracking-wide: 0.0875em; /* eyebrow / uppercase labels */

  --wc-weight-regular: 400;
  --wc-weight-medium: 500;
  --wc-weight-bold: 700;

  /* ====== Spacing — 4px scale ========================================== */
  --wc-space-1: 0.25rem;
  --wc-space-2: 0.5rem;
  --wc-space-3: 0.75rem;
  --wc-space-4: 1rem;
  --wc-space-5: 1.25rem;
  --wc-space-6: 1.5rem;
  --wc-space-8: 2rem;
  --wc-space-10: 2.5rem;
  --wc-space-12: 3rem;
  --wc-space-16: 4rem;
  --wc-space-20: 5rem;
  --wc-space-24: 6rem;

  /* ====== Layout ======================================================= */
  --wc-max-prose: 36rem;    /* 576 — Style Guide reading measure */
  --wc-max-content: 64rem;  /* 1024 */
  --wc-max-page: 72rem;     /* 1152 */
  --wc-gutter: var(--wc-space-6); /* 24 container padding */

  /* ====== Radius ======================================================= */
  --wc-radius-sm: 0.5rem;    /* 8 */
  --wc-radius-md: 0.625rem;  /* 10 */
  --wc-radius-lg: 0.75rem;   /* 12 — controls */
  --wc-radius-xl: 1rem;      /* 16 — cards */
  --wc-radius-pill: 9999px;

  --wc-border-width: 1px;

  /* ====== Motion ======================================================= */
  --wc-duration-fast: 120ms;
  --wc-duration-base: 200ms;
  --wc-duration-slow: 320ms;
  --wc-easing: cubic-bezier(0.2, 0, 0, 1);

  /* ====== Brand gradient ==============================================
     Decorative, 135deg, used as an accent rule — never behind small text,
     because contrast would have to hold across the whole swept area. */
  --wc-gradient: linear-gradient(135deg, var(--wc-brand-primary), var(--wc-brand-secondary));

  /* Text-safe variant. The decorative gradient starts at #f67723, which is
     2.77:1 on the canvas and fails even the 3:1 large-text threshold, so it is
     never painted onto glyphs. This one runs #c84b00 (4.51:1) to #dd3c8c
     (3.95:1): every point along it clears 3:1 for large display text. */
  --wc-gradient-text: linear-gradient(135deg, var(--wc-brand-primary-dark), var(--wc-brand-secondary));

  /* ====== Focus =======================================================
     Style Guide 1.1 flags the global 2px orange outline: #f67723 does not
     reach 3:1 on white. The measured dark orange is used instead, with an
     offset so the ring stays visible against the element itself. */
  --wc-focus-ring: var(--wc-brand-primary-dark);
  --wc-focus-width: 2px;
  --wc-focus-offset: 2px;

  /* ====== Control metrics =============================================
     Taken from the frontend primitives so blog controls are the same objects
     as product controls. Button: rounded-lg, heights 36/40/48, Inter Medium
     (ui.md records the same three heights and the 12px radius). Input:
     rounded-lg, white bg-base surface, 16px/10px padding, 14px body. */
  --wc-control-radius: var(--wc-radius-lg);   /* 12px */
  --wc-control-h-sm: 2.25rem;                 /* 36 */
  --wc-control-h-md: 2.5rem;                  /* 40 */
  --wc-control-h-lg: 3rem;                    /* 48 */
  --wc-control-px-md: var(--wc-space-5);      /* 20 */
  --wc-control-gap: var(--wc-space-3);        /* 12 */
  --wc-input-px: var(--wc-space-4);           /* 16 */
  --wc-input-py: 0.625rem;                    /* 10 */

  /* Card grammar, from the Card primitive and ui.md: light base surface,
     subtle 1px border, radius 16, padding 24. */
  --wc-card-radius: var(--wc-radius-xl);      /* 16 */
  --wc-card-padding: var(--wc-space-6);       /* 24 */

  /* ====== Elevation ==================================================== */
  --wc-shadow-soft: 0 1px 2px rgb(44 36 33 / 6%), 0 1px 1px rgb(44 36 33 / 4%);
  --wc-shadow-card: 0 4px 12px -4px rgb(44 36 33 / 10%), 0 2px 4px -2px rgb(44 36 33 / 6%);
  /* The frontend's shadow-brand-soft, carried over verbatim in intent: a warm
     brand-tinted lift rather than a neutral grey drop shadow. */
  --wc-shadow-brand: 0 10px 15px -3px color-mix(in srgb, var(--wc-brand-primary) 25%, transparent),
                     0 4px 6px -4px color-mix(in srgb, var(--wc-brand-primary) 25%, transparent);

  --wc-z-nav: 50;
}