/*
 * Dirck Golf School visual foundation
 *
 * This file owns the shared visual language. Feature styles should consume the
 * semantic --dirck-* aliases below instead of introducing new palette values.
 * The existing legacy variables remain temporarily available through mappings
 * in index.html while DIR-53 moves components onto shared primitives.
 */

:root {
  color-scheme: light;

  /* The default green theme is sampled from the approved D.G.S. pennant.
     Its authored colors are deliberately limited to these four values. */
  --dirck-logo-black: #0e0e0c;
  --dirck-logo-green: #293c2c;
  --dirck-logo-beige: #ecd2ae;
  --dirck-logo-white: #ffffff;

  --dirck-color-ink-950: var(--dirck-logo-black);
  --dirck-color-field-900: var(--dirck-logo-beige);
  --dirck-color-field-800: var(--dirck-logo-white);
  --dirck-color-field-700: var(--dirck-logo-green);
  --dirck-color-turf-500: var(--dirck-logo-green);
  --dirck-color-turf-300: var(--dirck-logo-green);
  --dirck-color-sand-500: var(--dirck-logo-beige);
  --dirck-color-sand-300: var(--dirck-logo-beige);
  --dirck-color-sky-500: var(--dirck-logo-white);
  --dirck-color-success-500: var(--dirck-logo-green);
  --dirck-color-warning-500: var(--dirck-logo-beige);
  --dirck-color-danger-500: var(--dirck-logo-black);

  /* Semantic color roles. */
  --dirck-color-bg: var(--dirck-color-field-900);
  --dirck-color-surface: var(--dirck-logo-white);
  --dirck-color-surface-raised: var(--dirck-logo-white);
  --dirck-color-surface-soft: var(--dirck-logo-white);
  --dirck-color-surface-strong: var(--dirck-logo-white);
  --dirck-color-control: var(--dirck-logo-white);
  --dirck-color-control-hover: var(--dirck-logo-beige);
  --dirck-color-selected-surface: var(--dirck-logo-green);
  --dirck-color-selected-border: var(--dirck-logo-green);
  --dirck-color-progress-track: var(--dirck-logo-beige);
  --dirck-color-scrim: rgba(14, 14, 12, 0.7);
  --dirck-color-system-bar: var(--dirck-logo-beige);
  --dirck-color-text: var(--dirck-logo-black);
  --dirck-color-text-strong: var(--dirck-logo-black);
  --dirck-color-text-muted: rgba(14, 14, 12, 0.64);
  --dirck-color-text-muted-strong: rgba(14, 14, 12, 0.76);
  --dirck-color-text-on-dark: var(--dirck-logo-white);
  --dirck-color-text-muted-on-dark: var(--dirck-logo-white);
  --dirck-color-accent-on-dark: var(--dirck-logo-white);
  --dirck-color-border: rgba(14, 14, 12, 0.13);
  --dirck-color-border-strong: rgba(41, 60, 44, 0.3);
  --dirck-color-accent: var(--dirck-color-turf-500);
  --dirck-color-accent-warm: var(--dirck-color-sand-500);
  --dirck-color-focus: var(--dirck-logo-green);
  --dirck-color-on-accent: var(--dirck-logo-white);
  --dirck-color-on-danger: var(--dirck-logo-white);
  --dirck-color-on-warm: var(--dirck-logo-black);
  --dirck-color-error-surface: var(--dirck-logo-black);
  --dirck-color-error-text: var(--dirck-logo-white);
  --dirck-color-info-surface: var(--dirck-logo-white);
  --dirck-color-info-text: var(--dirck-logo-green);
  --dirck-color-success-surface: var(--dirck-logo-white);
  --dirck-color-success-text: var(--dirck-logo-green);
  --dirck-color-warning-surface: var(--dirck-logo-beige);
  --dirck-color-warning-text: var(--dirck-logo-black);
  --dirck-app-background: var(--dirck-logo-beige);

  /* Account entry follows the selected palette while the pennant artwork is
     intentionally theme-invariant. */
  --dirck-color-auth-surface: var(--dirck-logo-white);
  --dirck-color-auth-surface-raised: var(--dirck-logo-white);
  --dirck-color-auth-border: rgba(14, 14, 12, 0.2);
  --dirck-color-auth-text: var(--dirck-logo-black);
  --dirck-color-auth-muted: rgba(14, 14, 12, 0.68);
  --dirck-color-auth-accent: var(--dirck-logo-green);
  --dirck-color-auth-focus: var(--dirck-logo-green);
  --dirck-color-auth-on-accent: var(--dirck-logo-white);
  --dirck-color-auth-error-surface: var(--dirck-logo-black);
  --dirck-color-auth-error-text: var(--dirck-logo-white);

  /* Type roles: system body text keeps controls native and fast; editorial
     display text is reserved for high-value moments, not dense lesson copy. */
  --dirck-font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dirck-font-display: Georgia, Cambria, "Times New Roman", serif;
  --dirck-font-label: var(--dirck-font-body);
  --dirck-font-size-caption: 0.75rem;
  --dirck-font-size-body-sm: 0.875rem;
  --dirck-font-size-body: 1rem;
  --dirck-font-size-title-sm: clamp(1.5rem, 4vw, 2rem);
  --dirck-font-size-title: clamp(2.125rem, 8vw, 3.5rem);
  --dirck-line-height-tight: 1.05;
  --dirck-line-height-body: 1.5;
  --dirck-letter-spacing-label: 0.08em;

  /* Four-pixel rhythm with larger editorial steps. */
  --dirck-space-1: 0.25rem;
  --dirck-space-2: 0.5rem;
  --dirck-space-3: 0.75rem;
  --dirck-space-4: 1rem;
  --dirck-space-5: 1.25rem;
  --dirck-space-6: 1.5rem;
  --dirck-space-8: 2rem;
  --dirck-space-10: 2.5rem;
  --dirck-space-12: 3rem;

  --dirck-radius-sm: 0.5rem;
  --dirck-radius-md: 0.875rem;
  --dirck-radius-lg: 1.25rem;
  --dirck-radius-xl: 1.75rem;
  --dirck-radius-pill: 999px;

  --dirck-shadow-sm: 0 1px 2px rgba(14, 14, 12, 0.08);
  --dirck-shadow-md: 0 8px 24px rgba(14, 14, 12, 0.12);
  --dirck-shadow-lg: 0 18px 48px rgba(14, 14, 12, 0.16);
  --dirck-inset-highlight: inset 0 0 transparent;

  --dirck-duration-instant: 1ms;
  --dirck-duration-fast: 120ms;
  --dirck-duration-standard: 180ms;
  --dirck-duration-slow: 320ms;
  --dirck-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dirck-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);

  --dirck-touch-target: 44px;
  --dirck-focus-ring: 0 0 0 4px rgba(41, 60, 44, 0.2);
  --dirck-auth-focus-ring: 0 0 0 4px rgba(41, 60, 44, 0.2);
}

/* DIR-64: one repository-owned, stroke-based icon language. The 24×24 vector
   grid scales cleanly at 1×/2×/3× and inherits semantic foreground colors. */
.dirckIcon {
  display: block;
  inline-size: 1em;
  block-size: 1em;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

:where(button, a) > .dirckIcon,
:where(button, a) > :where(span, b) > .dirckIcon {
  pointer-events: none;
}

[data-theme="green"] {
  color-scheme: light;
}

[data-theme="dark"] {
  color-scheme: dark;
  --dirck-color-ink-950: #11151b;
  --dirck-color-field-900: #171a23;
  --dirck-color-field-800: #222633;
  --dirck-color-field-700: #292e3d;
  --dirck-color-turf-500: #a8bdca;
  --dirck-color-turf-300: #bfd7e5;
  --dirck-color-sand-500: #c4b89b;
  --dirck-color-sand-300: #d7ccb2;
  --dirck-color-sky-500: #78a9bd;
  --dirck-color-success-500: #79b88a;
  --dirck-color-warning-500: #d5aa63;
  --dirck-color-danger-500: #b94c3c;
  --dirck-color-bg: #171a23;
  --dirck-color-surface: rgba(34, 38, 51, 0.97);
  --dirck-color-surface-raised: rgba(255, 255, 255, 0.075);
  --dirck-color-surface-soft: rgba(255, 255, 255, 0.038);
  --dirck-color-surface-strong: #292e3d;
  --dirck-color-control: rgba(255, 255, 255, 0.07);
  --dirck-color-control-hover: rgba(255, 255, 255, 0.12);
  --dirck-color-selected-surface: rgba(168, 189, 202, 0.15);
  --dirck-color-selected-border: rgba(168, 189, 202, 0.4);
  --dirck-color-progress-track: rgba(255, 255, 255, 0.09);
  --dirck-color-scrim: rgba(8, 9, 13, 0.78);
  --dirck-color-system-bar: #171a23;
  --dirck-color-text: #e6e8ed;
  --dirck-color-text-strong: #fbfbfc;
  --dirck-color-text-muted: rgba(230, 232, 237, 0.62);
  --dirck-color-text-muted-strong: rgba(230, 232, 237, 0.74);
  --dirck-color-text-on-dark: #fbfbfc;
  --dirck-color-text-muted-on-dark: rgba(230, 232, 237, 0.76);
  --dirck-color-accent-on-dark: #d7e2e8;
  --dirck-color-border: rgba(213, 220, 231, 0.13);
  --dirck-color-border-strong: rgba(213, 220, 231, 0.21);
  --dirck-color-accent: #a8bdca;
  --dirck-color-accent-warm: #c4b89b;
  --dirck-color-focus: #bfd7e5;
  --dirck-color-on-accent: #11151b;
  --dirck-color-on-warm: #171a23;
  --dirck-color-error-surface: rgba(141, 47, 37, 0.35);
  --dirck-color-error-text: #ffc0b4;
  --dirck-color-info-surface: rgba(99, 145, 165, 0.17);
  --dirck-color-info-text: #c7e3ee;
  --dirck-color-success-surface: rgba(91, 151, 107, 0.16);
  --dirck-color-success-text: #c1e5c9;
  --dirck-color-warning-surface: rgba(177, 132, 65, 0.17);
  --dirck-color-warning-text: #f0d2a1;
  --dirck-color-auth-surface: rgba(29, 32, 43, 0.96);
  --dirck-color-auth-surface-raised: rgba(255, 255, 255, 0.075);
  --dirck-color-auth-border: rgba(213, 220, 231, 0.2);
  --dirck-color-auth-text: #fbfbfc;
  --dirck-color-auth-muted: rgba(230, 232, 237, 0.7);
  --dirck-color-auth-accent: #c4b89b;
  --dirck-color-auth-focus: #bfd7e5;
  --dirck-color-auth-on-accent: #171a23;
  --dirck-color-auth-error-surface: rgba(141, 47, 37, 0.35);
  --dirck-color-auth-error-text: #ffc0b4;
  --dirck-app-background:
    radial-gradient(54rem 34rem at 16% 4%, rgba(126, 144, 163, 0.11), transparent 62%),
    radial-gradient(44rem 30rem at 90% 12%, rgba(196, 184, 155, 0.065), transparent 58%),
    #171a23;
  --dirck-shadow-sm: 0 6px 17px rgba(0, 0, 0, 0.28);
  --dirck-shadow-md: 0 13px 36px rgba(0, 0, 0, 0.4);
  --dirck-shadow-lg: 0 28px 82px rgba(0, 0, 0, 0.54);
  --dirck-inset-highlight: inset 0 1px rgba(255, 255, 255, 0.09);
  --dirck-focus-ring: 0 0 0 4px rgba(191, 215, 229, 0.2);
  --dirck-auth-focus-ring: 0 0 0 4px rgba(191, 215, 229, 0.2);
}

[data-theme="light"] {
  color-scheme: light;
  --dirck-color-ink-950: #201f19;
  --dirck-color-field-900: #f5f2eb;
  --dirck-color-field-800: #ffffff;
  --dirck-color-field-700: #edf2ef;
  --dirck-color-turf-500: #39788a;
  --dirck-color-turf-300: #62acc2;
  --dirck-color-sand-500: #a9825a;
  --dirck-color-sand-300: #c6a47d;
  --dirck-color-sky-500: #62acc2;
  --dirck-color-success-500: #3b7a49;
  --dirck-color-warning-500: #99671c;
  --dirck-color-danger-500: #9a3122;
  --dirck-color-bg: #f5f2eb;
  --dirck-color-surface: rgba(255, 255, 255, 0.97);
  --dirck-color-surface-raised: rgba(42, 40, 32, 0.055);
  --dirck-color-surface-soft: rgba(42, 40, 32, 0.028);
  --dirck-color-surface-strong: #ffffff;
  --dirck-color-control: rgba(42, 40, 32, 0.055);
  --dirck-color-control-hover: rgba(42, 40, 32, 0.1);
  --dirck-color-selected-surface: rgba(57, 120, 138, 0.12);
  --dirck-color-selected-border: rgba(57, 120, 138, 0.38);
  --dirck-color-progress-track: rgba(42, 40, 32, 0.09);
  --dirck-color-scrim: rgba(32, 31, 25, 0.52);
  --dirck-color-system-bar: #f5f2eb;
  --dirck-color-text: #2a2820;
  --dirck-color-text-strong: #201f19;
  --dirck-color-text-muted: rgba(42, 40, 32, 0.62);
  --dirck-color-text-muted-strong: rgba(42, 40, 32, 0.7);
  --dirck-color-border: rgba(42, 40, 32, 0.1);
  --dirck-color-border-strong: rgba(42, 40, 32, 0.18);
  --dirck-color-accent: #39788a;
  --dirck-color-accent-warm: #a9825a;
  --dirck-color-focus: #23718a;
  --dirck-color-on-accent: #ffffff;
  --dirck-color-on-danger: #ffffff;
  --dirck-color-on-warm: #201f19;
  --dirck-color-error-surface: rgba(154, 49, 34, 0.1);
  --dirck-color-error-text: #842b1e;
  --dirck-color-info-surface: rgba(63, 129, 148, 0.1);
  --dirck-color-info-text: #245c6d;
  --dirck-color-success-surface: rgba(59, 122, 73, 0.1);
  --dirck-color-success-text: #245d32;
  --dirck-color-warning-surface: rgba(153, 103, 28, 0.1);
  --dirck-color-warning-text: #6e4912;
  --dirck-color-auth-surface: rgba(255, 255, 255, 0.96);
  --dirck-color-auth-surface-raised: rgba(42, 40, 32, 0.055);
  --dirck-color-auth-border: rgba(42, 40, 32, 0.16);
  --dirck-color-auth-text: #201f19;
  --dirck-color-auth-muted: rgba(42, 40, 32, 0.68);
  --dirck-color-auth-accent: #39788a;
  --dirck-color-auth-focus: #23718a;
  --dirck-color-auth-on-accent: #ffffff;
  --dirck-color-auth-error-surface: rgba(154, 49, 34, 0.1);
  --dirck-color-auth-error-text: #842b1e;
  --dirck-app-background:
    radial-gradient(56rem 36rem at 15% 0%, rgba(57, 120, 138, 0.06), transparent 62%),
    radial-gradient(46rem 32rem at 90% 10%, rgba(169, 130, 90, 0.065), transparent 58%),
    #f5f2eb;
  --dirck-shadow-sm: 0 5px 14px rgba(42, 40, 32, 0.08);
  --dirck-shadow-md: 0 8px 24px rgba(42, 40, 32, 0.1);
  --dirck-shadow-lg: 0 22px 60px rgba(42, 40, 32, 0.16);
  --dirck-inset-highlight: inset 0 1px rgba(255, 255, 255, 0.72);
  --dirck-focus-ring: 0 0 0 4px rgba(35, 113, 138, 0.18);
  --dirck-auth-focus-ring: 0 0 0 4px rgba(35, 113, 138, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dirck-duration-fast: var(--dirck-duration-instant);
    --dirck-duration-standard: var(--dirck-duration-instant);
    --dirck-duration-slow: var(--dirck-duration-instant);
  }
}