/* Colors — Aperture Design System
 *
 * A photography-first system built on one interactive accent (Action Blue),
 * a near-black ink, and a light↔dark surface alternation. There is no second
 * brand color: every "click me" signal is Action Blue.
 */

:root {
  /* ---- Brand & accent ---------------------------------------------- */
  --color-action: #0066cc;          /* the single interactive color        */
  --color-action-focus: #0071e3;    /* keyboard focus ring only            */
  --color-action-on-dark: #2997ff;  /* links on dark surfaces              */

  /* ---- Surfaces ---------------------------------------------------- */
  --color-canvas: #ffffff;          /* dominant light canvas               */
  --color-parchment: #f5f5f7;       /* signature off-white / footer        */
  --color-pearl: #fafafc;           /* ghost-button fill                   */
  --color-tile-1: #272729;          /* primary dark tile                   */
  --color-tile-2: #2a2a2c;          /* micro-step lighter dark tile        */
  --color-tile-3: #252527;          /* micro-step darker dark tile         */
  --color-black: #000000;           /* true void: nav bar, video           */
  --color-chip-translucent: #d2d2d7;/* over-photo control chip base        */

  /* ---- Text -------------------------------------------------------- */
  --color-ink: #1d1d1f;             /* headlines + body on light           */
  --color-ink-80: #333333;          /* body on pearl                       */
  --color-ink-48: #7a7a7a;          /* disabled text, fine print           */
  --color-on-dark: #ffffff;         /* text on dark tiles / nav            */
  --color-on-dark-muted: #cccccc;   /* secondary copy on dark              */
  --color-on-action: #ffffff;       /* text on the blue action fill        */

  /* ---- Hairlines & borders ----------------------------------------- */
  --color-divider-soft: #f0f0f0;    /* soft ring on ghost buttons          */
  --color-hairline: #e0e0e0;        /* 1px card / chip border              */
  --border-hairline-alpha: rgba(0, 0, 0, 0.08); /* card border in practice */
  --border-divider-alpha: rgba(0, 0, 0, 0.04);  /* soft ghost ring         */

  /* ---- Over-photo translucency ------------------------------------- */
  --color-chip-fill: rgba(210, 210, 215, 0.64); /* circular control chip   */

  /* ---- Semantic aliases -------------------------------------------- */
  --surface-page: var(--color-canvas);
  --surface-alt: var(--color-parchment);
  --surface-dark: var(--color-tile-1);
  --surface-card: var(--color-canvas);
  --text-primary: var(--color-ink);
  --text-secondary: var(--color-ink-80);
  --text-muted: var(--color-ink-48);
  --text-link: var(--color-action);
  --border-card: var(--color-hairline);
}