/* RIME — components/bundle.css, loaded after tokens.css.
   tokens.css (generated from tokens.json) declares every colour per theme, spacing,
   radius, shadow, type-scale size / line-height / weight, the font families and
   @font-face. This sheet keeps what tokens.json does not hold, from the old
   styles.css + tokens/*.css (kept whole in archived/). */

/* ---- from tokens/colors.css ---- */
:root {
  --rime-focus-ring-width: 2px;
  --rime-focus-ring-offset: 2px;
}

/* DARK THEME (opt-in) — the values tokens.json cannot hold */
html[data-theme="dark"] {
  --surface-hover: color-mix(in srgb, #27272a 50%, #52525b);
  --color-link-hover: #F7A87A;   /* orange-300 */
}

/* ---- from tokens/typography.css ----
   Every tier pairs a Latin and an Arabic face of equal authority. The stacks are
   tokens.json type.families (--font-display, --font-display-arabic, --font-english,
   --font-arabic, --font-mono); the --rime-* names below point at them. */
:root {
  /* Families */
  --rime-font-display: var(--font-display);
  --rime-font-display-arabic: var(--font-display-arabic);
  --rime-font-english: var(--font-english);
  --rime-font-arabic: var(--font-arabic);
  --rime-font-mono: var(--font-mono);

  /* Default UI font (English contexts). Arabic contexts flip below. */
  --rime-font-ui: var(--rime-font-english);

  /* Display tracking + Arabic body line-height */
  --rime-display-tracking: -0.02em;
  --rime-lh-arabic-body: 1.9; /* @kind other */
}

[dir="rtl"] {
  --rime-font-ui: var(--rime-font-arabic);
  --rime-font-display: var(--rime-font-display-arabic);
}

/* ---- from tokens/effects.css ---- */
:root {
  /* Apple-style continuous "squircle" corners. Pair with any radius:
     `border-radius: var(--rime-radius-md); corner-shape: var(--rime-corner-squircle);`
     Degrades gracefully to a normal rounded corner where corner-shape is unsupported. */
  --rime-corner-sharp: bevel;
  --rime-corner-round: round;                  /* default circular arc */
  --rime-corner-squircle: superellipse(2.4);   /* iOS-like smoothing on fields/buttons */
  --rime-corner-squircle-soft: superellipse(1.8); /* gentler smoothing for large surfaces */

  /* ---- Motion (§4.8) — no motion over 240ms in operational flows ---- */
  --rime-duration-fast: 120ms; /* @kind other */
  --rime-duration-base: 180ms; /* @kind other */
  --rime-duration-slow: 240ms; /* @kind other */
  --rime-easing-standard: cubic-bezier(0, 0, 0.2, 1); /* @kind other */
  --rime-easing-exit: cubic-bezier(0.4, 0, 1, 1); /* @kind other */

  /* ---- Layer / z-index scale (v0.2 §4.10) ---- */
  --rime-layer-base: 0; /* @kind other */
  --rime-layer-sticky: 100; /* @kind other */
  --rime-layer-dropdown: 1000; /* @kind other */
  --rime-layer-drawer: 1100; /* @kind other */
  --rime-layer-modal: 1200; /* @kind other */
  --rime-layer-toast: 1300; /* @kind other */
  --rime-layer-tooltip: 1400; /* @kind other */

  /* ---- Frosted glass (§4.11) — the ONE place RIME blurs: chrome that floats
     over scrolling content (sticky top bar, floating sidebar, overlay scrims,
     media-tile overlays). Not decoration: the blur exists so the field stays
     legible when content slides under it. Always pair the tint with the hairline
     border and the saturate() — the tint alone reads as flat translucency.
     The tints, border and scrim are tokens.json colours (--rime-glass-*). ---- */
  --rime-glass-blur: 14px;                       /* @kind other */
  --rime-glass-blur-strong: 24px;                /* @kind other */
  --rime-glass-filter: saturate(180%) blur(var(--rime-glass-blur)); /* @kind other */
  --rime-glass-filter-strong: saturate(180%) blur(var(--rime-glass-blur-strong)); /* @kind other */
}

/* Frosted chrome. Apply to a sticky/fixed bar or a floating panel:
   `<header class="rime-glass">`. Falls back to the opaque tint where
   backdrop-filter is unsupported, so text never lands on bare content. */
.rime-glass {
  background: var(--rime-glass-tint);
  -webkit-backdrop-filter: var(--rime-glass-filter);
  backdrop-filter: var(--rime-glass-filter);
  border-color: var(--rime-glass-border);
}
.rime-glass-strong {
  background: var(--rime-glass-tint-strong);
  -webkit-backdrop-filter: var(--rime-glass-filter-strong);
  backdrop-filter: var(--rime-glass-filter-strong);
  border-color: var(--rime-glass-border);
}
/* Over imagery / camera tiles — dark glass, light text. */
.rime-glass-dark {
  background: var(--rime-glass-tint-dark);
  -webkit-backdrop-filter: var(--rime-glass-filter);
  backdrop-filter: var(--rime-glass-filter);
  border-color: rgba(255,255,255,0.14);
  color: var(--rime-clarity-white);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .rime-glass { background: var(--bg-base); }
  .rime-glass-strong { background: var(--bg-base); }
  .rime-glass-dark { background: #0A0E1A; }
}
/* Motion/transparency sensitivity: drop the blur, keep the surface opaque. */
@media (prefers-reduced-transparency: reduce) {
  .rime-glass, .rime-glass-strong { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg-base); }
  .rime-glass-dark { backdrop-filter: none; -webkit-backdrop-filter: none; background: #0A0E1A; }
}

/* FIELDS MATCH BUTTONS (governance change log #39): text inputs, selects and
   textareas share the Button's corner — --rime-radius-button (12px), a plain
   circular arc — and its resting 1px --border-color-strong. The squircle is
   retired from product controls; --rime-corner-squircle stays as a token for
   back-compat only. Cards, panels and drawers keep standard rounded radii. */
input, select, textarea {
  corner-shape: round;
}

/* TOGGLES & CHOICE CONTROLS are the exception: Switch, Radio, Checkbox and
   SegmentedControl carry [data-rime-control] and stay truly round — a squircled
   pill, knob or dot reads as a defect. Opt any element out with `corner-shape: round`. */
[data-rime-control],
[data-rime-control] *,
[data-rime-control]::before,
[data-rime-control]::after {
  corner-shape: round;
}

/* ---- Toast (inverse surface) ----
   A dark toast in both themes: Midnight on the light field; zinc-800 with a
   zinc-700 hairline on the dark field so it still lifts off zinc-950.
   Status hues come from the brand palette inside the component. No glow. */
:root {
  --toast-bg: var(--rime-midnight);
  --toast-border: var(--rime-navy-800);
  --toast-text: var(--rime-clarity-white);
  --toast-text-secondary: var(--rime-navy-200);
  --toast-close: var(--rime-navy-300);
  --toast-close-hover-bg: color-mix(in srgb, var(--rime-clarity-white) 10%, transparent);
}
html[data-theme="dark"] {
  --toast-bg: var(--rime-zinc-800);
  --toast-border: var(--rime-zinc-700);
  --toast-text-secondary: var(--rime-zinc-300);
  --toast-close: var(--rime-zinc-400);
}
.rime-toast-close:hover { background: var(--toast-close-hover-bg) !important; color: var(--toast-text) !important; }
.rime-toast-close:focus-visible { outline: var(--rime-focus-ring-width) solid var(--color-primary); outline-offset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .rime-toast { animation: rime-toast-in var(--rime-duration-base) var(--rime-easing-standard); }
}
@keyframes rime-toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---- Tabs (contained pill bar) ----
   Inactive tabs brighten on hover; keyboard focus gets the brand ring. */
.rime-tab[aria-selected="false"]:hover { color: var(--text-primary) !important; background: var(--bg-hover) !important; }
.rime-tab:focus-visible { outline: var(--rime-focus-ring-width) solid var(--color-primary); outline-offset: 1px; }