/* tokens.css — styles CSVE organisés par responsabilité. */

@import "../vendor/ios27-design-system/css/tokens.css";

@import "../vendor/ios27-design-system/css/materials.css";

@import "../vendor/ios27-design-system/css/spacing.css";

@import "../vendor/ios27-design-system/css/animations.css";

:root {
  color-scheme: dark;
  /* Responsive foundation: shared values for the future container-based system. */
  --layout-max: 1180px;
  --page-inline: 1rem;
  --bottom-nav-space: calc(4.20625rem + max(8px, env(safe-area-inset-bottom, 0px)) + .54375rem);
  --app-header-block-size: calc(44px + max(.5rem, env(safe-area-inset-top, 0px)) + .5rem + 1px);
  --app-notice-block-size: 0px;
  --touch-target: 44px;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --radius-control: 12px;
  --radius-card: 18px;
  --radius-panel: 20px;
  --radius-glass: 28px;
  /* Anthracite shell, opaque sage tiles and soft mint accents. */
  --ink: #f1f6f2;
  --muted: #c1d0c5;
  --line: rgba(183, 211, 192, .24);
  --paper: #27312b;
  --paper-strong: #303e35;
  --card: var(--surface-content);
  --green: #91dcaf;
  --deep: #a5e4bf;
  --on-accent: #173426;
  --on-danger: #3a1817;
  --soft: #2c4937;
  --red: #ffb2a9;
  --redsoft: #523933;
  --amber: #edcf96;
  --ambersoft: #4c4331;
  --blue: #9fc9ed;
  --bluesoft: #2e4350;
  --event-surface: var(--surface-content);
  --event-match-surface: var(--event-surface);
  --event-match-surface-deep: var(--surface-content-soft);
  --event-match-ink: var(--ink);
  --event-match-muted: var(--muted);
  --event-training-surface: var(--surface-content);
  --event-match-accent: var(--line);
  --event-training-accent: var(--line);
  --event-training-ink: var(--ink);
  --event-training-muted: var(--muted);
  --event-disabled: #9bab9f;
  --event-content-primary: var(--ink);
  --event-content-secondary: var(--muted);
  /* Surface roles: glass is reserved for navigation and floating controls. */
  --surface-content: #354d40;
  --surface-content-soft: #2d4036;
  --surface-content-image: linear-gradient(155deg, #3c5548, var(--surface-content) 72%);
  --surface-content-border: rgba(183, 211, 192, .24);
  --surface-content-shadow: 0 4px 14px rgba(9, 22, 14, .16);
  --page-canvas: #0b100d;
  --info-surface: rgba(246, 211, 123, .82);
  --info-border: rgba(246, 211, 123, .48);
  --info-ink: #2c2411;
  --info-accent: #4b3911;
  --poll-surface: #c8ceca;
  --poll-surface-image: linear-gradient(155deg, #d9dfdb, var(--poll-surface) 72%);
  --poll-ink: #1b2520;
  --poll-muted: #425149;
  --poll-control-surface: #e1e6e2;
  --poll-border: rgba(35, 53, 42, .22);
  --poll-accent: #246544;
  --poll-selected: #b9dfc8;
  --glass-nav-surface: rgba(39, 49, 43, .9);
  --glass-nav-border: rgba(183, 211, 192, .24);
  --glass-nav-shadow: 0 8px 24px rgba(9, 22, 14, .22);
  --glass-nav-blur: 18px;
  --glass-nav-control-surface: transparent;
  --glass-filter-control-surface: rgba(39, 49, 43, .92);
  --glass-control-active: var(--green);
  --glass-control-border: var(--line);
  --glass-filter-surface: rgba(39, 49, 43, .92);
  --glass-filter-border: var(--line);
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-family: var(--font-ui);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-nav-surface: rgba(39, 49, 43, .9);
    --glass-filter-surface: rgba(39, 49, 43, .92);
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-nav-surface: var(--paper);
    --glass-nav-blur: 0px;
    --glass-filter-surface: var(--paper);
  }

}

@media (prefers-contrast: more) {
  :root {
    --surface-content-border: #b7d3c0;
    --surface-content-image: none;
    --poll-surface-image: none;
    --surface-content-shadow: none;
    --glass-nav-surface: var(--paper);
    --glass-nav-border: #b7d3c0;
    --glass-control-border: #b7d3c0;
    --glass-filter-surface: var(--paper);
    --glass-filter-border: #b7d3c0;
  }

}

@media (max-width: 699px) {
  :root {
    /* 393px is the current 100% mobile reference; smaller phones scale rem
       dimensions proportionally, with a 90% floor for the 320px case. */
    --ui-rem-size: clamp(14.4px, 4.071246vw, 16px);
    font-size: var(--ui-rem-size);
  }
}

@media (max-width: 699px) {
  :root :is(input, select, textarea):not(.match-result-score input) {
    font-size: max(16px, 1rem);
  }
}