/*
 * BetAlert Brand System v2 — canonical implementation foundation.
 *
 * Design source of truth: /docs/BETALERT_BRAND_V2.md
 * Public pages load it only for the shared shell (css/brand-v2-shell.css);
 * tokens resolve inside [data-brand-v2] roots, never on legacy page bodies.
 * Admin does not load it. Page migrations opt in instead of redefining values.
 */

@layer brand-v2.tokens, brand-v2.foundation, brand-v2.primitives, brand-v2.components, brand-v2.utilities;

@layer brand-v2.tokens {
  [data-brand-v2] {
    /* Typography */
    --ft-display: Newsreader, Georgia, serif;
    --ft-ui: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ft-h1-size: 62px;
    --ft-h1-size-mobile: 40px;
    --ft-h1-lh: 1.06;
    --ft-h1-weight: 600;
    --ft-h1-tracking: -0.02em;
    --ft-h2-size: 40px;
    --ft-h2-size-mobile: 30px;
    --ft-h2-lh: 1.14;
    --ft-h2-weight: 600;
    --ft-h2-tracking: -0.015em;
    --ft-h3-size: 22px;
    --ft-h3-lh: 1.3;
    --ft-h3-weight: 650;
    --ft-h3-tracking: -0.012em;
    --ft-h4-size: 18px;
    --ft-h4-lh: 1.32;
    --ft-h4-weight: 600;
    --ft-body-large-size: 18px;
    --ft-body-large-lh: 1.6;
    --ft-body-size: 16px;
    --ft-body-lh: 1.65;
    --ft-small-size: 14px;
    --ft-small-lh: 1.5;
    --ft-button-size: 15px;
    --ft-button-lh: 1.2;
    --ft-button-weight: 600;
    --ft-button-tracking: 0.02em;
    --ft-label-size: 12px;
    --ft-label-lh: 1.3;
    --ft-label-weight: 700;
    --ft-label-tracking: 0.06em;

    /* Brand and surfaces */
    --navy: #03203f;
    --navy-deep: #021526;
    --red: #c53b3a;
    --red-deep: #8e2c2b;
    --red-accent: #c47b74;
    --red-tint: #f6e4e4;
    --bg: #ece8de;
    --surface: #ffffff;
    --surface-subtle: #f3efe6;
    --text: #141414;
    --text-secondary: #3a3a3a;
    --text-muted: #5c5c5c;
    --text-on-dark: #ffffff;
    --text-on-red: #ffffff;
    --link: #8e2c2b;

    /* Borders */
    --color-border-subtle: #ece8de;
    --color-border-default: #d8d3c6;
    --color-border-strong: #b7b1a3;
    --border-subtle-color: var(--color-border-subtle);
    --border-default-color: var(--color-border-default);
    --border-strong-color: var(--color-border-strong);
    --border: var(--border-default-color);
    --border-subtle: 1px solid var(--border-subtle-color);
    --border-default: 1px solid var(--border-default-color);
    --border-strong: 1px solid var(--border-strong-color);
    --dark-border-subtle: rgba(255, 255, 255, 0.14);
    --dark-border-default: rgba(255, 255, 255, 0.22);
    --dark-border-strong: rgba(255, 255, 255, 0.34);

    /* S1 semantic colors */
    --status-reported-text: #7a2a28;
    --status-reported-border: #a85a56;
    --status-reported-fill: #efe4e3;
    --status-review-text: #6f4a00;
    --status-review-border: #a07a2a;
    --status-review-fill: #efe6cf;
    --status-published-text: #165a38;
    --status-published-border: #3d7a58;
    --status-published-fill: #dde8e2;
    --status-warning-text: #6f4a00;
    --status-warning-border: #a07a2a;
    --status-warning-fill: #efe6cf;
    --status-error-text: #8f1c14;
    --status-error-border: #b45a52;
    --status-error-fill: #f0e2e0;
    --status-success-text: #165a38;
    --status-success-border: #3d7a58;
    --status-success-fill: #dde8e2;
    --status-info-text: #1e3a4f;
    --status-info-border: #5a7184;
    --status-info-fill: #e4e7ea;

    /* Structured shape */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;
    --shadow-none: none;
    --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.04);
    --shadow-md: 0 2px 6px rgba(20, 20, 20, 0.06);
    --shadow-elevated: 0 8px 20px rgba(20, 20, 20, 0.08);

    /* Spacing and layout */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --container-main: 1120px;
    --container-editorial-wide: 900px;
    --container-reading: 740px;
    --page-pad: 24px;
    --section-gap: 80px;
    --grid-gap: 24px;
    --card-pad: 20px;
    --card-pad-compact: 16px;
    --card-pad-large: 24px;

    /* Controls */
    --control-height: 44px;
    --control-radius: 8px;
    --control-padding-x: 12px;
    --input-font-size: 15px;
    --input-font-weight: 400;
    --label-font-size: 14px;
    --label-font-weight: 600;
    --input-bg: #ffffff;
    --input-text: #141414;
    --input-placeholder: #5c5c5c;
    --input-border: 1px solid #d8d3c6;
    --input-border-hover: 1px solid #b7b1a3;
    --input-border-focus: 1px solid #03203f;
    --input-border-error: 1px solid #b45a52;
    --input-border-success: 1px solid #3d7a58;
    --input-focus-ring: 3px solid rgba(197, 59, 58, 0.45);
    --textarea-min-height: 120px;
    --checkbox-size: 16px;
    --checkbox-radius: 4px;

    /* Balanced buttons */
    --bl-height: 44px;
    --bl-pad-x: 16px;
    --bl-size: 15px;
    --bl-weight: 600;
    --bl-lh: 1.2;
    --bl-tracking: 0.01em;
    --bl-gap: 8px;
    --bl-radius: 8px;
    --bl-border-width: 1px;

    /* Motion */
    --mo-fast: 140ms;
    --mo-standard: 220ms;
    --mo-emphasis: 320ms;
    --mo-reveal: 450ms;
    --mo-hero: 500ms;
    --mo-hero-max: 600ms;
    --mo-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --mo-ease-inout: ease-in-out;
    --mo-ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);

    /* Minimal shared layer scale */
    --z-base: 0;
    --z-raised: 10;
    --z-sticky: 30;
    --z-overlay: 100;
    --z-modal: 110;
  }

  @media (min-width: 640px) and (max-width: 899px) {
    [data-brand-v2] {
      --page-pad: 24px;
      --section-gap: 64px;
      --grid-gap: 20px;
    }
  }

  @media (max-width: 639px) {
    [data-brand-v2] {
      --ft-h1-size: var(--ft-h1-size-mobile);
      --ft-h2-size: var(--ft-h2-size-mobile);
      --page-pad: 20px;
      --section-gap: 48px;
      --grid-gap: 16px;
    }
  }

  @media (max-width: 340px) {
    [data-brand-v2] {
      --page-pad: 16px;
    }
  }
}

@layer brand-v2.foundation {
  [data-brand-v2] {
    color: var(--text);
    font-family: var(--ft-ui);
    font-size: var(--ft-body-size);
    line-height: var(--ft-body-lh);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  [data-brand-v2] ::selection {
    background: var(--red-tint);
    color: var(--text);
  }

  [data-brand-v2] :where(a, button, input, select, textarea, [tabindex]):focus-visible,
  .bv2-focusable:focus-visible {
    outline: var(--input-focus-ring);
    outline-offset: 2px;
  }

  [data-brand-v2] :where(button, input, select, textarea):disabled,
  [data-brand-v2] [aria-disabled="true"],
  .bv2-is-disabled {
    cursor: not-allowed;
    opacity: 0.42;
  }
}

@layer brand-v2.primitives {
  .bv2-display,
  .bv2-h1,
  .bv2-h2 {
    color: var(--text);
    font-family: var(--ft-display);
    font-weight: 600;
  }

  .bv2-display,
  .bv2-h1 {
    font-size: var(--ft-h1-size);
    line-height: var(--ft-h1-lh);
    letter-spacing: var(--ft-h1-tracking);
  }

  .bv2-h2 {
    font-size: var(--ft-h2-size);
    line-height: var(--ft-h2-lh);
    letter-spacing: var(--ft-h2-tracking);
  }

  .bv2-h3 {
    color: var(--text);
    font-family: var(--ft-ui);
    font-size: var(--ft-h3-size);
    font-weight: var(--ft-h3-weight);
    line-height: var(--ft-h3-lh);
    letter-spacing: var(--ft-h3-tracking);
  }

  .bv2-h4 {
    color: var(--text);
    font-family: var(--ft-ui);
    font-size: var(--ft-h4-size);
    font-weight: var(--ft-h4-weight);
    line-height: var(--ft-h4-lh);
  }

  .bv2-body-large {
    font-size: var(--ft-body-large-size);
    line-height: var(--ft-body-large-lh);
  }

  .bv2-body {
    font-size: var(--ft-body-size);
    line-height: var(--ft-body-lh);
  }

  .bv2-small,
  .bv2-meta {
    color: var(--text-muted);
    font-size: var(--ft-small-size);
    line-height: var(--ft-small-lh);
    letter-spacing: 0.01em;
  }

  .bv2-label {
    font-size: var(--ft-label-size);
    font-weight: var(--ft-label-weight);
    line-height: var(--ft-label-lh);
    letter-spacing: var(--ft-label-tracking);
  }

  .bv2-container,
  .bv2-container-wide,
  .bv2-container-reading {
    width: min(100% - (2 * var(--page-pad)), var(--container-main));
    margin-inline: auto;
  }

  .bv2-container-wide {
    max-width: var(--container-editorial-wide);
  }

  .bv2-container-reading {
    max-width: var(--container-reading);
  }

  .bv2-section {
    padding-block: var(--section-gap);
  }

  .bv2-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap);
  }

  .bv2-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bv2-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
  }

  .bv2-stack {
    display: grid;
    gap: var(--space-5);
  }

  @media (min-width: 640px) and (max-width: 899px) {
    .bv2-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 639px) {
    .bv2-grid,
    .bv2-grid-2 {
      grid-template-columns: 1fr;
    }
  }
}

@layer brand-v2.components {
  .bv2-link {
    color: var(--link);
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0.16em;
    transition: color var(--mo-fast) var(--mo-ease-inout),
      text-decoration-color var(--mo-standard) var(--mo-ease-inout);
  }

  .bv2-link:hover,
  .bv2-link:focus-visible {
    color: var(--red-deep);
    text-decoration-color: currentColor;
  }

  .bv2-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bl-gap);
    min-height: var(--bl-height);
    padding-inline: var(--bl-pad-x);
    border: var(--bl-border-width) solid transparent;
    border-radius: var(--bl-radius);
    background: transparent;
    color: var(--navy);
    font-family: var(--ft-ui);
    font-size: var(--bl-size);
    font-weight: var(--bl-weight);
    line-height: var(--bl-lh);
    letter-spacing: var(--bl-tracking);
    box-shadow: none;
    cursor: pointer;
    transition: background-color var(--mo-standard) var(--mo-ease-inout),
      border-color var(--mo-fast) var(--mo-ease-inout),
      color var(--mo-fast) var(--mo-ease-inout),
      transform var(--mo-fast) var(--mo-ease-out);
  }

  .bv2-button-sm {
    --bl-height: 40px;
    --bl-pad-x: 12px;
  }

  .bv2-button-lg {
    --bl-height: 48px;
    --bl-pad-x: 20px;
  }

  .bv2-button-primary {
    border-color: var(--red);
    background: var(--red);
    color: var(--text-on-red);
  }

  .bv2-button-primary:hover,
  .bv2-button-primary:active {
    border-color: var(--red-deep);
    background: var(--red-deep);
  }

  .bv2-button-secondary {
    border-color: var(--border-default-color);
    background: var(--surface);
    color: var(--navy);
  }

  .bv2-button-secondary:hover {
    background: var(--surface-subtle);
  }

  .bv2-button-outline {
    border-color: var(--navy);
    color: var(--navy);
  }

  .bv2-button-outline:hover,
  .bv2-button-ghost:hover {
    background: var(--surface-subtle);
  }

  .bv2-button-ghost {
    color: var(--navy);
    text-decoration: underline;
    text-underline-offset: 0.16em;
  }

  .bv2-button-danger {
    border-color: var(--status-error-border);
    background: var(--status-error-fill);
    color: var(--status-error-text);
  }

  .bv2-field {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
  }

  .bv2-field + .bv2-field {
    margin-top: var(--space-5);
  }

  .bv2-field-label {
    color: var(--navy);
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    line-height: 1.3;
  }

  .bv2-input,
  .bv2-select,
  .bv2-textarea {
    width: 100%;
    min-width: 0;
    min-height: var(--control-height);
    border: var(--input-border);
    border-radius: var(--control-radius);
    background: var(--input-bg);
    color: var(--input-text);
    padding-inline: var(--control-padding-x);
    font-family: var(--ft-ui);
    font-size: var(--input-font-size);
    font-weight: var(--input-font-weight);
    line-height: 1.4;
    box-shadow: none;
    transition: border-color var(--mo-fast) var(--mo-ease-inout),
      background-color var(--mo-standard) var(--mo-ease-inout);
  }

  .bv2-textarea {
    min-height: var(--textarea-min-height);
    padding-block: 10px;
    resize: vertical;
  }

  .bv2-input::placeholder,
  .bv2-textarea::placeholder {
    color: var(--input-placeholder);
    opacity: 1;
  }

  .bv2-input:hover:not(:disabled),
  .bv2-select:hover:not(:disabled),
  .bv2-textarea:hover:not(:disabled) {
    border: var(--input-border-hover);
  }

  .bv2-input[aria-invalid="true"],
  .bv2-select[aria-invalid="true"],
  .bv2-textarea[aria-invalid="true"] {
    border: var(--input-border-error);
  }

  .bv2-field-help,
  .bv2-field-message {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--ft-small-size);
    line-height: var(--ft-small-lh);
  }

  .bv2-field-message {
    font-weight: 600;
  }

  .bv2-field-message-error {
    color: var(--status-error-text);
  }

  .bv2-field-message-success {
    color: var(--status-success-text);
  }

  .bv2-card {
    overflow: hidden;
    background: var(--surface);
    border: var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-none);
  }

  .bv2-card-interactive {
    transition: border-color var(--mo-standard) var(--mo-ease-inout);
  }

  .bv2-card-interactive:hover {
    border-color: var(--border-default-color);
  }

  .bv2-card-body {
    padding: var(--card-pad);
  }

  .bv2-card-compact .bv2-card-body {
    padding: var(--card-pad-compact);
  }

  .bv2-card-large .bv2-card-body {
    padding: var(--card-pad-large);
  }

  .bv2-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 2px 9px;
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    font-family: var(--ft-ui);
    font-size: var(--ft-label-size);
    font-weight: var(--ft-label-weight);
    line-height: var(--ft-label-lh);
    letter-spacing: var(--ft-label-tracking);
  }

  .bv2-badge-reported {
    border-color: var(--status-reported-border);
    background: var(--status-reported-fill);
    color: var(--status-reported-text);
  }

  .bv2-badge-review,
  .bv2-badge-warning {
    border-color: var(--status-review-border);
    background: var(--status-review-fill);
    color: var(--status-review-text);
  }

  .bv2-badge-success {
    border-color: var(--status-success-border);
    background: var(--status-success-fill);
    color: var(--status-success-text);
  }
}

@layer brand-v2.utilities {
  .bv2-reveal {
    opacity: 1;
    transform: none;
  }

  .is-reveal-ready .bv2-reveal {
    opacity: 0;
    transform: translateY(16px);
  }

  .is-reveal-ready .bv2-reveal.is-visible {
    animation: bv2-enter var(--mo-reveal) var(--mo-ease-reveal) forwards;
  }

  .bv2-stagger-item {
    animation-delay: var(--bv2-stagger-delay, 0ms);
  }

  .bv2-transition {
    transition-duration: var(--mo-standard);
    transition-timing-function: var(--mo-ease-inout);
  }

  .bv2-transition-emphasis {
    transition-duration: var(--mo-emphasis);
    transition-timing-function: var(--mo-ease-reveal);
  }

  .bv2-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  @keyframes bv2-enter {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-brand-v2] {
    scroll-behavior: auto;
  }

  [data-brand-v2] *,
  [data-brand-v2] *::before,
  [data-brand-v2] *::after,
  .bv2-reveal,
  .bv2-stagger-item,
  .bv2-transition,
  .bv2-transition-emphasis {
    animation-duration: 0.01ms;
    animation-delay: 0ms;
    animation-iteration-count: 1;
    scroll-behavior: auto;
    transition-duration: 0.01ms;
  }

  .bv2-reveal {
    opacity: 1;
    transform: none;
  }
}