/* Marinno brand tokens — the single source for BOTH apps.
 *
 * Linked by /admin/index.html and /index.html before their own stylesheet.
 * Two apps drifting apart on brand colour or type is exactly the failure this
 * file exists to prevent, so put anything brand-level here and nothing else:
 * components stay in each app's own sheet.
 *
 * Values come from the official site, marinno.uz (a Webflow build). They are
 * the brand, not preferences — see the Brand table in CLAUDE.md.
 */

:root {
  color-scheme: light;

  /* --- brand, straight off marinno.uz --- */
  --accent: #e52323;        /* the red. 4.57:1 on white — passes AA either way round */
  --accent-dark: #c01c1c;   /* pressed */
  --accent-deep: #4e0000;   /* brand maroon — the site's own button label colour */
  --accent-soft: #fdecec;   /* tint behind badges and highlights */
  --on-accent: #ffffff;

  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f4f5;     /* the site's secondary surface */
  --border: #e4e4e7;
  --hair: #efeff1;

  --text: #040404;
  /* The site uses #999 for muted text (2.9:1 — fails AA). These are tools read
   * under warehouse lighting and in daylight on a phone, so functional muted
   * text is darkened to ~5.3:1; --text-faint keeps the lighter grey for
   * decoration only. Both are biased warm so the greys sit with the red. */
  --text-muted: #6e6764;
  --text-faint: #9a9490;

  --green: #1c8f4d;
  --green-soft: #e8f6ee;
  --amber: #b26a00;
  --amber-soft: #fdf1df;
  --red: #d12626;
  --red-soft: #fdecec;
  --gray-soft: #f4f4f5;

  --radius: 16px;           /* the site's card radius */
  --radius-sm: 12px;
  --radius-pill: 99px;      /* the site's buttons are pills */
  --shadow: 0 1px 2px rgb(4 4 4 / 0.05), 0 8px 24px rgb(4 4 4 / 0.06);

  /* Motion vocabulary, shared with the sibling Choyxona app. Extend these; do
   * not hand-type new curves. Every animation ships a reduced-motion fallback. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* entrances, settles, presses */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);   /* sheets */
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);  /* one gentle overshoot — rare */
  --dur-fast: 130ms;
  --dur-base: 200ms;
  --dur-sheet: 340ms;

  /* The site uses a single family at 400/500/600 — no display/UI split. */
  --ui: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --disp: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* The brand site is light-only. Dark is derived here rather than lifted: the
 * red is lightened to #ff5252 so it still clears 4.5:1 against the dark ground,
 * which #e52323 would not. Neutrals stay warm-biased — a blue-grey next to a
 * warm red reads as a mistake. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --accent: #ff5252;
    --accent-dark: #e5403f;
    --accent-deep: #ffb3b3;
    --accent-soft: #3a1414;
    --on-accent: #2a0000;

    --bg: #151312;
    --surface: #1d1a19;
    --surface-2: #262221;
    --border: #38322f;
    --hair: #2e2926;

    --text: #f7f4f3;
    --text-muted: #b0a7a4;
    --text-faint: #857b78;

    --green: #4ec97e;
    --green-soft: #17301f;
    --amber: #e0a355;
    --amber-soft: #33260f;
    --red: #ff6b6b;
    --red-soft: #351616;
    --gray-soft: #262221;

    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.3);
  }
}

/* --- Shared base --------------------------------------------------------- */

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Keyboard focus. Both apps opt in to the same ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Buttons ------------------------------------------------------------- */
/* Pills, because the site's are. These are brand, not app furniture, so both
 * apps share them; anything app-specific (a danger button, a ghost) stays in
 * that app's own sheet. */

.btn-primary,
.btn-secondary {
  font-family: var(--ui);
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  padding: 12px 20px;
  min-height: 46px;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
}
.btn-primary:active:not(:disabled) { transform: scale(0.97); background: var(--accent-dark); }

/* The site's own pill: white ground, maroon label. */
.btn-secondary {
  background: var(--surface);
  color: var(--accent-deep);
  border-color: var(--border);
}
.btn-secondary:active:not(:disabled) { transform: scale(0.97); background: var(--surface-2); }

/* A quiet control that still reads as a control — a bordered pill with an
 * icon. Plain borderless text looks like a label, and nobody clicks a label. */
.btn-quiet {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  min-height: 38px;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn-quiet .icon { stroke-width: 2; flex: none; }
.btn-quiet:active { transform: scale(0.97); background: var(--surface-2); }

button:disabled { opacity: 0.4; cursor: default; }

/* Guarded so a tap never sticks in a hover state on a touch device. */
@media (hover: hover) {
  .btn-primary:hover:not(:disabled) { background: var(--accent-dark); }
  .btn-secondary:hover:not(:disabled) { background: var(--surface-2); border-color: var(--text-faint); }
  /* Signing out is mildly destructive, and red is the brand — the warning
   * colour and the brand colour happen to be the same thing here. */
  .btn-quiet:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary:active:not(:disabled),
  .btn-secondary:active:not(:disabled),
  .btn-quiet:active { transform: none; }
}