/* =========================================================================
   RegisterFlow - Design System (design_system.css) (ADDITIVE LAYER)
   -------------------------------------------------------------------------
   SAFE TO INCLUDE GLOBALLY. This file is purely additive:

     • It does NOT restyle existing components (no blanket rules on your
       current .btn / .card / table / input classes), so it cannot change
       how today's screens look or lay out.
     • The only GLOBAL rules it adds are an accessibility/outdoor "quality
       floor": visible keyboard focus, reduced-motion support, comfortable
       touch targets on touch devices, and crisper font rendering. These add
       behaviour your pages were missing; they don't repaint anything.
     • Everything else is OPT-IN: design tokens (mirroring base.css) and a set
       of .ds-* utility classes for any NEW page, so future screens look like
       part of the same product without retrofitting old ones.

   How to use:
     1. (Optional, recommended) Load it after base.css for the global floor:
        <link rel="stylesheet"
              href="{{ url_for('static', filename='css/design_system.css') }}">
     2. On NEW pages, build with .ds-btn / .ds-card / .ds-input / .ds-badge…
     3. For an outdoor/high-contrast page scope, add data-rf-outdoor to a
        container (the floating accessibility widget already offers this to
        end-users at runtime — this is just a CSS-level equivalent).

   Tokens below intentionally match static/css/base.css so the two stay in
   harmony. If you change a brand value, change it in both places.
   ========================================================================= */

:root {
  /* ── Brand tokens ────────────────────────────────────────────────────
     Single source of truth is base.css :root. We alias each base token into
     the ds- namespace via var(); the literal after the comma is only a
     fallback if base.css hasn't loaded. Change a brand colour in base.css and
     it flows here automatically — no value is duplicated as a live source. */
  --ds-ink:var(--ink,#05070e);        --ds-ink2:var(--ink2,#090d18);
  --ds-slate:var(--slate,#0e1220);    --ds-slate2:var(--slate2,#131929);   --ds-slate3:var(--slate3,#1a2235);
  --ds-border:var(--border,#1e2840);  --ds-border2:var(--border2,#273350);
  --ds-blue:var(--blue,#2563ff);      --ds-blue2:var(--blue2,#4d7bff);
  --ds-teal:var(--teal,#00d4aa);      --ds-rose:var(--rose,#ff4d6d);       --ds-amber:var(--amber,#f59e0b);
  --ds-text:var(--text,#dce6ff);      --ds-text2:var(--text2,#7b8db0);     --ds-text3:var(--text3,#3d4f6e);

  --ds-font-display:var(--font-display,'Syne', system-ui, sans-serif);
  --ds-font-body:var(--font-body,'Heebo', system-ui, sans-serif);

  --ds-r:var(--r,12px);  --ds-r-s:var(--r-s,7px);  --ds-r-l:var(--r-l,18px);

  /* Spacing scale — use these on new layouts for consistent rhythm. */
  --ds-space-1:4px;  --ds-space-2:8px;  --ds-space-3:12px; --ds-space-4:16px;
  --ds-space-5:24px; --ds-space-6:32px; --ds-space-7:48px; --ds-space-8:64px;

  /* Elevation — one shadow language for new cards/modals. */
  --ds-shadow-sm:0 1px 2px rgba(0,0,0,.30);
  --ds-shadow:0 6px 20px rgba(0,0,0,.35);
  --ds-shadow-lg:0 18px 50px rgba(0,0,0,.50);

  --ds-grad:linear-gradient(135deg, var(--ds-blue), #7c3aed);
  --ds-grad-teal:linear-gradient(140deg, var(--ds-blue), var(--ds-teal));

  /* Focus ring colour — bright enough to read in sunlight. */
  --ds-focus:#5b8cff;
  --ds-focus-ring:0 0 0 3px rgba(91,140,255,.55);
}

/* =========================================================================
   GLOBAL QUALITY FLOOR  (additive behaviour only — no visual restyle)
   ========================================================================= */

/* 1) Visible keyboard focus everywhere.
   :focus-visible only triggers for keyboard/AT users, so mouse users see no
   change. This is the single biggest WCAG 2.2 (2.4.7 / 2.4.13) win and also
   helps outdoor visibility. We DON'T touch :focus to avoid altering existing
   click styles. */
:where(a, button, input, select, textarea, summary, [tabindex], [role="button"],
       [role="tab"], [role="link"], [role="menuitem"]):focus-visible {
  outline: 3px solid var(--ds-focus) !important;
  outline-offset: 2px !important;
  border-radius: var(--ds-r-s);
}

/* 2) Respect the OS "reduce motion" setting. Additive: only constrains motion
   when the user has asked for it. (The accessibility widget also exposes a
   manual toggle.) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 3) Comfortable touch targets on touch / coarse-pointer devices only.
   Desktops with a mouse are unaffected. Helps the "working outside on a
   tablet" case without changing desktop density. (WCAG 2.5.8) */
@media (pointer: coarse) {
  :where(button, a.btn, [role="button"], .exm-link, .exm-add,
         .btn-add, .pw-toggle) {
    min-height: 40px;
  }
}

/* 4) Crisper text rendering — subtle, global, safe. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* =========================================================================
   OPT-IN UTILITIES  (apply only where you add the class — for NEW pages)
   ========================================================================= */

/* Layout helpers */
.ds-stack   { display:flex; flex-direction:column; gap:var(--ds-space-4); }
.ds-row     { display:flex; align-items:center; gap:var(--ds-space-3); flex-wrap:wrap; }
.ds-between { display:flex; align-items:center; justify-content:space-between; gap:var(--ds-space-3); flex-wrap:wrap; }
.ds-grid    { display:grid; gap:var(--ds-space-4); }
.ds-grid-2  { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ds-grid-3  { grid-template-columns:repeat(3,minmax(0,1fr)); }
.ds-grid-4  { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:760px){ .ds-grid-2,.ds-grid-3,.ds-grid-4{ grid-template-columns:1fr; } }

/* Card */
.ds-card {
  background:var(--ds-slate2);
  border:1px solid var(--ds-border);
  border-radius:var(--ds-r-l);
  padding:var(--ds-space-5);
  box-shadow:var(--ds-shadow-sm);
}
.ds-card--hover { transition:border-color .15s, box-shadow .15s, transform .15s; }
.ds-card--hover:hover { border-color:var(--ds-border2); box-shadow:var(--ds-shadow); transform:translateY(-2px); }

/* Buttons */
.ds-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--ds-space-2);
  font-family:var(--ds-font-body); font-size:.9rem; font-weight:700; line-height:1;
  padding:.7rem 1.2rem; border-radius:var(--ds-r-s);
  border:1px solid transparent; cursor:pointer; user-select:none;
  transition:filter .15s, background .15s, border-color .15s, transform .1s;
}
.ds-btn:active { transform:translateY(1px); }
.ds-btn-primary  { background:var(--ds-grad); color:#fff; }
.ds-btn-primary:hover { filter:brightness(1.08); }
.ds-btn-secondary{ background:var(--ds-slate3); color:var(--ds-text); border-color:var(--ds-border2); }
.ds-btn-secondary:hover { border-color:var(--ds-blue); }
.ds-btn-ghost    { background:transparent; color:var(--ds-text2); border-color:var(--ds-border2); }
.ds-btn-ghost:hover { color:var(--ds-text); border-color:var(--ds-blue); }
.ds-btn-danger   { background:rgba(255,77,109,.12); color:var(--ds-rose); border-color:rgba(255,77,109,.4); }
.ds-btn-danger:hover { background:rgba(255,77,109,.2); }

/* Inputs */
.ds-input, .ds-select, .ds-textarea {
  width:100%; font-family:var(--ds-font-body); font-size:.9rem;
  color:var(--ds-text); background:var(--ds-ink2);
  border:1px solid var(--ds-border2); border-radius:var(--ds-r-s);
  padding:.6rem .8rem; transition:border-color .15s, box-shadow .15s;
}
.ds-input::placeholder, .ds-textarea::placeholder { color:var(--ds-text3); }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
  outline:none; border-color:var(--ds-blue); box-shadow:var(--ds-focus-ring);
}
.ds-label { display:block; font-size:.78rem; font-weight:600; color:var(--ds-text2); margin-bottom:.35rem; }

/* Badges */
.ds-badge {
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.72rem; font-weight:700; padding:.22rem .6rem; border-radius:999px;
  border:1px solid var(--ds-border2); color:var(--ds-text2); background:var(--ds-slate3);
}
.ds-badge-success { color:var(--ds-teal); border-color:rgba(0,212,170,.4); background:rgba(0,212,170,.1); }
.ds-badge-warn    { color:var(--ds-amber); border-color:rgba(245,158,11,.4); background:rgba(245,158,11,.1); }
.ds-badge-danger  { color:var(--ds-rose); border-color:rgba(255,77,109,.4); background:rgba(255,77,109,.1); }
.ds-badge-info    { color:var(--ds-blue2); border-color:rgba(77,123,255,.4); background:rgba(37,99,255,.1); }

/* Table (opt-in, for new tables) */
.ds-table { width:100%; border-collapse:collapse; font-size:.86rem; }
.ds-table th { text-align:start; font-weight:700; color:var(--ds-text2); padding:.7rem .8rem; border-bottom:1px solid var(--ds-border2); }
.ds-table td { padding:.7rem .8rem; border-bottom:1px solid var(--ds-border); color:var(--ds-text); }
.ds-table tbody tr { transition:background .12s; }
.ds-table tbody tr:hover { background:rgba(37,99,255,.05); }

/* Empty state (an empty screen is an invitation to act) */
.ds-empty { text-align:center; padding:var(--ds-space-7) var(--ds-space-4); color:var(--ds-text2); }
.ds-empty-ic { font-size:2.4rem; margin-bottom:var(--ds-space-3); opacity:.8; }
.ds-empty-title { font-family:var(--ds-font-display); font-size:1.1rem; font-weight:800; color:var(--ds-text); margin-bottom:var(--ds-space-2); }

/* Text utilities */
.ds-muted    { color:var(--ds-text2); }
.ds-display  { font-family:var(--ds-font-display); font-weight:800; }
.ds-gradient-text { background:var(--ds-grad-teal); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* =========================================================================
   OUTDOOR / SUNLIGHT SCOPE  (opt-in: add data-rf-outdoor to a container)
   -------------------------------------------------------------------------
   A CSS-level equivalent of the widget's "קריאה בשמש" profile. Scoped to the
   element you put it on, so it never affects the rest of the app. Boosts text
   contrast and weight and strengthens focus — no layout changes.
   ========================================================================= */
[data-rf-outdoor] {
  --ds-text:#ffffff;
  --ds-text2:#c9d6f5;
  --ds-text3:#9fb0d6;
}
[data-rf-outdoor], [data-rf-outdoor] * { text-shadow:none !important; }
[data-rf-outdoor] :where(p, span, td, th, label, li, a) { font-weight:600; }
[data-rf-outdoor] :where(h1,h2,h3,h4) { font-weight:800; }
[data-rf-outdoor] :where(a, button, input, select, textarea):focus-visible {
  outline-width:4px !important;
}