/* Design tokens.
 *
 * The brand values are the client's own, from the IrisReveal design package —
 * the same four gradient stops the app and the wordmark use, so the panel, the
 * emails and the phone are one brand rather than three approximations.
 *
 * Two deliberate deviations, both marked where they are defined: the muted
 * grey is one step darker so secondary text clears WCAG AA, and the fluid type
 * floors are raised so nothing becomes unreadable in a short browser window. */

:root {
  /* Brand gradient — the client's four stops, unaltered. Sampled from the
   * supplied wordmark, so changing one stops matching the artwork beside it. */
  --brand-blue:    #0b8bff;
  --brand-indigo:  #4a5bf5;
  --brand-violet:  #8b4df6;
  --brand-magenta: #e935e9;

  /* Left-to-right, as the wordmark reads. Used on the primary button, the
   * active rail item and anywhere the brand needs to be the whole surface. */
  --brand-sweep: linear-gradient(
    90deg,
    var(--brand-blue) 0%,
    var(--brand-indigo) 34%,
    var(--brand-violet) 68%,
    var(--brand-magenta) 100%
  );

  /* Brand, as flat colours.
   *
   * --accent is the gradient's optical middle. A gradient cannot be a colour,
   * and most of this panel needs one — a border, an icon, a focus ring — so
   * everything that cannot carry the sweep carries violet and stays in the
   * same family as the things that can. */
  --accent:       #8b4df6;
  --accent-hover: #7a3aef;
  --accent-ink:   #6f2ee0;
  --accent-deep:  #5518bb;
  --accent-soft:  #faf7fe;
  --accent-ring:  #d3bcfa;
  --accent-wash:  #f2edfd;
  --accent-chip:  #f3eefd;

  /* Ink */
  --ink:   #141317;
  --ink-2: #2c2a32;
  --ink-3: #4a4753;
  --ink-4: #5d5966;

  /* The design's muted greys are #8a8692 (3.6:1 on white) and #a09ca9 (2.7:1).
   * Both fail WCAG AA for body text, and the secondary text in this panel
   * carries real information — emails, timestamps, counts. --muted is the
   * design's own next step down, #6f6a78, at 5.2:1: the same grey to look at,
   * but measurably legible. --muted-faint stays for decoration only. */
  --muted:       #6f6a78;
  --muted-faint: #a09ca9;
  --faint:       #c0bbca;

  /* Surfaces */
  /* A wash of the brand's violet end, not a second palette. */
  --page-grad: radial-gradient(120% 120% at 100% 0%, #e2d4fb 0%, #eeeaf2 45%, #f3f1f4 100%);
  --shell:  #f2f0f3;
  --panel:  #ffffff;
  --sub:    #faf9fc;
  --sub-2:  #f4f2f6;
  --sub-3:  #f6f4f9;
  --dark:   #232228;
  --dark-2: #35333c;

  /* Lines */
  --line:   #e6e2ec;
  --line-2: #f2eff6;
  --line-3: #f4f1f7;
  --line-4: #ece8f1;

  /* Status */
  --ok-bg:    #e2f7e8;  --ok:      #17864a;
  --warn-bg:  #fff5e6;  --warn:    #8a5a10;
  --bad-bg:   #fde7e8;  --bad:     #c2313c;
  --bad-soft: #fdf0f1;  --bad-ink: #8a2b33;
  --open-bg:  #ede0fd;  --open:    #6f2ee0;
  --quiet-bg: #f1eff4;  --quiet:   #4a4753;

  /* Radii */
  --r-shell: 24px;  --r-rail: 20px;  --r-card: 18px;
  --r-head:  16px;  --r-tile: 15px;  --r-row:  14px;
  --r-ctl:   12px;  --r-btn:  11px;  --r-nav:  13px;  --r-sm: 9px;

  /* Fluid type. The design's clamps bottom out at 9-10px; these floors are
   * raised to stay readable when the viewport is short. */
  --t-micro: clamp(11px, 1.3vh, 12px);
  --t-small: clamp(12px, 1.42vh, 13px);
  --t-body:  clamp(13px, 1.6vh, 15px);
  --t-mid:   clamp(14px, 1.75vh, 17px);
  --t-lg:    clamp(15px, 1.9vh, 18px);
  --t-h2:    clamp(16px, 2.1vh, 22px);
  --t-h1:    clamp(21px, 3.2vh, 34px);

  /* Rhythm */
  --gap:   clamp(7px, 1.1vh, 14px);
  --gap-x: clamp(7px, .9vw, 16px);
  --pad-y: clamp(9px, 1.4vh, 18px);
  --pad-x: clamp(11px, 1.1vw, 22px);

  --shadow-shell: 0 30px 70px -30px rgba(60, 40, 90, .28);
  --shadow-pop:   0 18px 40px -18px rgba(50, 30, 80, .32);

  /* Cards lift off the shell with light rather than a line. Two layers: a
   * tight one for the edge, a wide soft one for the lift. Tinted violet
   * rather than neutral grey, so the shadow belongs to the same palette as
   * everything casting it. */
  --shadow-card:       0 1px 2px rgba(60, 40, 90, .05), 0 6px 18px -10px rgba(60, 40, 90, .16);
  --shadow-card-hover: 0 2px 4px rgba(60, 40, 90, .07), 0 14px 30px -14px rgba(60, 40, 90, .26);

  /* One curve for everything that moves. A single easing is most of what
   * makes an interface feel like one piece rather than several. */
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
  --ease: cubic-bezier(.22, .61, .36, 1);
}