/* =============================================================
   FALMIS — ICONS
   Requires falmis-tokens.css

   TWO LAYERS, DELIBERATELY UNALIKE

   .fm-i   UI icons.       Stroke only, currentColor, invisible.
                           A gear is a control, not a picture.
   .fm-sym Falmis symbols. Gradient stroke, glow, larger.
                           The moon, the eye, the palm, the cards.

   Never style a UI icon like a symbol. The moment a settings
   gear glows, the tarot card stops meaning anything.

   WHY NOT FILLED GLASS ICONS
   They carry their own material and their own light source. On
   glass surfaces that is a third layer of shine competing with
   two you already have. Worse, they cannot inherit currentColor,
   so hover, active, disabled, and error states die at the icon.
   ============================================================= */

/* =============================================================
   LAYER 1 — UI ICONS
   ============================================================= */

.fm-i{
  --i-size:24px;
  --i-stroke:1.5;

  width:var(--i-size);
  height:var(--i-size);
  flex:none;
  display:inline-block;
  vertical-align:middle;

  fill:none;
  stroke:currentColor;
  stroke-width:var(--i-stroke);
  stroke-linecap:round;
  stroke-linejoin:round;

  transition:color var(--fm-dur-fast) var(--fm-ease-out),
             transform var(--fm-dur-fast) var(--fm-ease-out),
             opacity var(--fm-dur-fast) var(--fm-ease-out);
}

/* ---------- sizes ----------
   Stroke weight compensates. A 1.5px line on a 16px icon reads
   heavier than the same line on 32px, so small sizes thin out
   and large sizes thicken. Without this the set looks uneven. */

.fm-i--xs{ --i-size:16px; --i-stroke:1.35; }  /* inline with text */
.fm-i--sm{ --i-size:20px; --i-stroke:1.45; }  /* dense rows, chips */
.fm-i--md{ --i-size:24px; --i-stroke:1.5;  }  /* default */
.fm-i--lg{ --i-size:32px; --i-stroke:1.6;  }  /* feature rows */
.fm-i--xl{ --i-size:48px; --i-stroke:1.75; }  /* empty states */

/* ---------- colour ---------- */

.fm-i--muted  { color:var(--fm-text-muted); }
.fm-i--accent { color:var(--fm-text-accent); }
.fm-i--brand  { color:var(--fm-violet-400); }
.fm-i--success{ color:var(--fm-success); }
.fm-i--warning{ color:var(--fm-warning); }
.fm-i--error  { color:var(--fm-error); }

/* Default is inherit. An icon inside a button, a link, or a
   disabled control takes that element's colour automatically —
   which is the whole reason for stroke plus currentColor. */

/* ---------- states ---------- */

.fm-i--disabled{ color:var(--fm-text-disabled); }
.fm-i--spin{ animation:fm-i-spin 900ms linear infinite; }
@keyframes fm-i-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){
  html:not(.fm-motion-force) .fm-i--spin{animation-duration:2.4s;}
}

/* ---------- mirroring ----------
   From the step 6 audit. Direction icons flip with the document.
   Recognition icons never do. */

[dir="rtl"] .fm-i--dir{ transform:scaleX(-1); }
/* apply to: arrows, chevrons, back, forward, send, reply,
   undo, redo, indent, progress, next, previous
   NEVER apply to: clock, check, play, pause, logos, numbers */

/* ---------- an icon in a box ---------- */

.fm-i-box{
  display:grid;
  place-content:center;
  width:44px;
  height:44px;
  border-radius:var(--fm-radius-md);
  border:1px solid var(--fm-border);
  background:rgba(255,255,255,.04);
  color:var(--fm-text-muted);
  transition:color var(--fm-dur-fast) var(--fm-ease-out),
             background var(--fm-dur-fast) var(--fm-ease-out),
             border-color var(--fm-dur-fast) var(--fm-ease-out);
}
.fm-i-box--accent{
  border-color:var(--fm-border-accent);
  background:var(--fm-tint-violet);
  color:var(--fm-text-accent);
}
.fm-i-box--lg{ width:56px; height:56px; border-radius:var(--fm-radius-lg); }
a:hover > .fm-i-box,
button:hover > .fm-i-box{
  color:var(--fm-text-accent);
  border-color:var(--fm-border-accent);
  background:var(--fm-tint-violet);
}

/* =============================================================
   LAYER 2 — FALMIS SYMBOLS

   These are brand, not interface. They are allowed a gradient
   stroke and a glow because they appear rarely and mean
   something. Default size is 32px; they are usually larger.

   <svg class="fm-sym"><use .../></svg>
   Requires the gradient defs below to be present once per page.
   ============================================================= */

.fm-sym{
  --sym-size:32px;
  --sym-stroke:1.5;

  width:var(--sym-size);
  height:var(--sym-size);
  flex:none;
  display:inline-block;
  vertical-align:middle;

  fill:none;
  stroke:url(#fm-sym-grad);
  stroke-width:var(--sym-stroke);
  stroke-linecap:round;
  stroke-linejoin:round;

  filter:drop-shadow(0 0 10px rgba(124,58,237,.42));
  transition:filter var(--fm-dur-base) var(--fm-ease-out),
             transform var(--fm-dur-base) var(--fm-ease-out);
}
.fm-sym--sm{ --sym-size:24px; --sym-stroke:1.5; }
.fm-sym--lg{ --sym-size:48px; --sym-stroke:1.4; }
.fm-sym--xl{ --sym-size:72px; --sym-stroke:1.25; }
.fm-sym--hero{ --sym-size:120px; --sym-stroke:1; }

/* a symbol that is also a control */
a:hover > .fm-sym,
button:hover > .fm-sym,
.fm-card--link:hover .fm-sym{
  filter:drop-shadow(0 0 18px rgba(124,58,237,.66));
  transform:translateY(-2px);
}

/* flat variant — for a symbol on a busy or bright surface,
   where a glow would turn to mud */
.fm-sym--flat{
  stroke:currentColor;
  filter:none;
  color:var(--fm-text-accent);
}

/* the slow breath, for a symbol in a loading or waiting state */
.fm-sym--breath{ animation:fm-sym-breath 4.5s var(--fm-ease-ambient) infinite; }
@keyframes fm-sym-breath{
  0%,100%{ filter:drop-shadow(0 0 8px rgba(124,58,237,.32)); }
  50%    { filter:drop-shadow(0 0 22px rgba(124,58,237,.62)); }
}
@media (prefers-reduced-motion:reduce){
  html:not(.fm-motion-force) .fm-sym--breath{animation:none;}
}

/* =============================================================
   RULES

   · Never mix the layers. A UI icon in a tab bar and a symbol on
     a service card must not look like the same family.
   · One symbol per view, at most two. They glow, and glow is a
     scarce resource — the same rule as the aurora button.
   · UI icons are always paired with a label, except where the
     shape is unambiguous and the control has aria-label: close,
     search, menu, back.
   · Icons never carry meaning alone. An error icon sits beside
     error words, always.
   · Stroke weight scales with size. Do not scale an icon with
     CSS width alone; use the size classes so the stroke follows.
   · Decorative icons take aria-hidden="true". Icon-only buttons
     take aria-label.

   SOURCE
   UI layer: Lucide (MIT, ~1600 icons, 24px grid). Set stroke to
   1.5. Phosphor is the alternative if weight variants are
   wanted. Both inherit currentColor, which is the requirement.
   Symbol layer: custom. Roughly twelve marks, drawn to the same
   24px grid so the two layers sit on a shared geometry even
   though they read differently.
   ============================================================= */