/**
 * Aurah — design tokens, for aurah.social.
 *
 * A copy of aurah/tokens.css so this site deploys on its own. It mirrors it
 * value for value; DESIGN_SYSTEM.md remains the source of truth and any
 * change goes there first, then into both files.
 *
 * Original header follows.
 *
 * Aurah — design tokens.
 *
 * Self-contained: this file replaces the alpha's tokens.css entirely and
 * has no dependency on deprecated/. DESIGN_SYSTEM.md is the source of
 * truth — add a value there first, then mirror it here.
 *
 * Every text colour below was measured against every surface below.
 * Nothing in this file falls under 4.5:1 at the size it is used.
 */

:root {

  /* ================================================================
     Surfaces
     ================================================================ */
  --color-page-bg:   #F7F5EF;   /* the page ground — cream, carries the grain */
  --color-surface:   #FFFFFF;   /* raised: compose, empty state, date chip,
                                   and a request while it still needs you     */
  --color-inset:     #F7F4ED;   /* recessed: a request once you've answered it */
  --color-passage:   #F1EDE3;   /* the ground under someone else's words —
                                   a turn they wrote in a conversation. Soft
                                   enough to scan past, firm enough to scan by. */
  --color-row-hover: #F8F6F0;
  --color-row-active:#F1EEE6;
  --color-row-zebra: #FAF8F2;   /* key hint chip                              */
  --color-scrollbar: #E4DFD3;

  /* ================================================================
     Borders — three weights, no more
     ================================================================ */
  --border-input:   #DCD5C6;    /* an editable edge                           */
  --border-default: #E7E2D8;    /* a real edge: card, chip, button            */
  --border-divider: #F1EDE4;    /* a separation, not an edge: between notes   */
  --border-focus:   #9FB09C;    /* focus ring, and the quiet mark             */

  /* ================================================================
     Text — four steps, each doing different work.
     The alpha had six, three of which failed WCAG AA and were
     indistinguishable from each other. See DESIGN_SYSTEM.md § Colour.
     ================================================================ */
  --text-ink:         #23271F;  /* min 13.84:1 — what you came to read       */
  --text-body-muted:  #4A5142;  /* min  7.51:1 — secondary prose, quotes     */
  --text-label:       #5D6154;  /* min  5.79:1 — uppercase section labels    */
  --text-meta:        #686C5E;  /* min  4.61:1 — time, place, byline, counts.
                                   Darkened from #6C7062 when --color-passage
                                   was added: a sixth surface it had to clear. */
  --text-placeholder: #6E7263;  /* min  4.53:1 — placeholders are text too    */
  --text-btn-secondary: #3A4136;
  --text-avatar-initials: #4A4433;

  /* ================================================================
     Green — the only hue in the system
     ================================================================ */
  --green-fill:        #2C4230;
  --green-fill-hover:  #3A543D;
  --green-fill-active: #253A29;
  --green-link:        #3A543D;
  --green-link-hover:  #2C4230;
  --green-link-active: #1F2E22;

  /* ================================================================
     People
     One neutral fill, not nine. The alpha's nine avatar tones all
     measured 5.77–6.53:1 against the initials colour — the same value
     at slightly different hue, so they identified nobody. People are
     identified by name and face; colour is reserved for rooms.
     ================================================================ */
  --avatar-bg: #D7D2C4;         /* initials on it: 6.42:1 */

  /* ================================================================
     Type — two faces, two jobs.
     Newsreader reads. Instrument Sans labels, controls and counts.
     Neither does the other's job.
     ================================================================ */
  --font-display: 'Newsreader', Georgia, serif;
  --font-ui: 'Instrument Sans', system-ui, sans-serif;

  /* Reading (serif) */
  --text-read:    17px;   /* note body, compose input                 */
  --text-read-sm: 15px;   /* quoted passage, feed end, empty state    */
  --text-blank:   19px;   /* the one line of an empty state           */
  --text-section: 20px;   /* a section heading in the reading column  */
  --text-room:    27px;   /* a room's name on its own page            */
  --text-day:     15px;   /* day marker                               */
  --text-why:  14.5px;    /* the reason on a contact request, italic  */
  --text-17:      17px;   /* wordmark, date numeral                   */

  /* Interface (sans) */
  --text-10:    10px;     /* month abbreviation inside a date chip    */
  --text-11:    11px;     /* section labels, key hint                 */
  --text-11-5:  11.5px;   /* time, byline meta, hints                 */
  --text-12:    12px;     /* buttons                                  */
  --text-12-5:  12.5px;   /* list rows, nav, actions                  */
  --text-13:    13px;     /* names, base                              */

  --leading-read:  1.6;   /* serif reading                            */
  --leading-body:  1.5;   /* sans body                                */
  --label-tracking: 0.1em;

  /* ================================================================
     Space — one primitive scale. The alpha stopped at 56px and stayed
     mid-dense throughout; range is what lets density become a tool.
     ================================================================ */
  --space-2:  2px;   --space-3:  3px;   --space-4:  4px;
  --space-5:  5px;   --space-6:  6px;   --space-8:  8px;
  --space-10: 10px;  --space-11: 11px;
  --space-12: 12px;  --space-13: 13px;  --space-14: 14px;
  --space-16: 16px;  --space-18: 18px;  --space-20: 20px;
  --space-24: 24px;  --space-28: 28px;  --space-32: 32px;
  --space-40: 40px;  --space-48: 48px;  --space-64: 64px;

  /* ================================================================
     Radius
     ================================================================ */
  --radius-tile: 10px;   /* compose, empty state                     */
  --radius-md:    8px;   /* request card, search, inputs             */
  --radius-sm:    7px;   /* buttons, date chip, medium avatar        */
  --radius-xs:    6px;   /* key hint, small avatar, room cover       */
  --radius-pill: 999px;  /* the pending count only                   */

  /* ================================================================
     Sizes
     ================================================================ */
  --size-avatar-xs:  24px;   /* the bar                              */
  --size-avatar-sm:  30px;   /* a request                            */
  --size-avatar-md:  34px;   /* a note, the compose field            */
  --size-hero:       76px;   /* the square in a page head. A room puts a
                                cover in it, a person an avatar, a
                                gathering its date — one size, because it
                                is one slot, whatever is standing in it.  */
  --size-room-cover: 28px;   /* room thumb in a rail list             */
  --size-room-thumb: 44px;   /* room thumb in the index board         */
  --size-date-chip:  40px;   /* a date in a list; --size-hero in a head */
  --record-label-w:  74px;   /* the label column of a record          */

  /* ================================================================
     Layout — the page scrolls; one reading column owns the width
     ================================================================ */
  --feed-max:  640px;                    /* the reading column — 61ch of
                                            Newsreader at 17px, measured  */
  --rail-w:    clamp(228px, 21vw, 268px);
  --gutter:    clamp(30px, 4.6vw, 68px);
  --bar-h:     58px;
  --rail-top:  calc(var(--bar-h) + var(--space-24));  /* where a sticky
                                            column parks under the bar */
  --convo-list-w: clamp(236px, 25vw, 312px);   /* conversation list pane */
  --shell-pad: clamp(20px, 4vw, 44px);

  /* One shell width for every page, so the bar always aligns with the
     content under it. Today, People, Rooms and Conversations all sit in
     this box; only how they divide it differs. */
  --shell-max: calc(var(--feed-max) + var(--rail-w) + var(--gutter) + var(--shell-pad) * 2);

  /* ================================================================
     Material — paper, not elevation. There are no shadows in Aurah.
     ================================================================ */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-opacity: 0.045;

  /* House grade, so every photograph on Aurah belongs to Aurah. */
  --image-grade: saturate(0.7) brightness(0.98) contrast(0.98);
  --image-wash: rgba(247, 245, 239, 0.10);
  --image-placeholder: #D7D2C4;

  /* ================================================================
     Motion — two authored moments, and nothing else animates:
     accepting a contact request, and the page stepping back while
     you write. Both use the same ease; only the duration differs.
     ================================================================ */
  --ease-settle: cubic-bezier(.2, .7, .2, 1);
  --duration-settle: 460ms;
  --duration-dim: 260ms;

  /* How far the rest of the page recedes while the compose field has
     focus. Low enough that the field is unambiguously the only lit
     thing; not zero, so you never lose your place. */
  --dim-opacity: 0.2;

  /* ================================================================
     States
     ================================================================ */
  --focus-ring: 2px solid var(--border-focus);
  --focus-ring-offset: 1px;
  --disabled-opacity: 0.45;
}