/* ============================================================
   Design tokens — the single source of truth for colour.

   Extracted from the shipped v4 + v6 prototypes by frequency
   analysis, so every value below is a colour the app actually
   uses. See styleguide.html for the visual specimen.

   Rule: new work references var(--token). Do not hardcode hex.
   ============================================================ */

:root {

  /* ---------------------------------------------------------
     PURPLE RAMP — the brand colour. One hue, ten steps.
     --------------------------------------------------------- */
  --purple-900: #5B21B6;   /* pressed / deepest accent          */
  --purple-700: #5F2EEA;   /* PRIMARY — buttons, links, active  */
  --purple-500: #7C5CBF;   /* secondary purple, chat avatars    */
  --purple-400: #A78BFA;   /* AI accents, sparkles              */
  --purple-300: #B9ABF7;   /* decorative, dividers on purple    */
  --purple-200: #C4B5FD;   /* muted text on dark purple         */
  --purple-100: #E3DFFC;   /* secondary button fill             */
  --purple-75:  #EDE9FE;   /* card fill, chips                  */
  --purple-50:  #EEEBFF;   /* icon badges                       */
  --purple-25:  #F5F3FF;   /* section background                */
  --purple-15:  #F8F6FF;   /* palest wash                       */
  --purple-10:  #F0EFFB;   /* alternate palest wash             */
  --purple-05:  #EEECF8;   /* alternate palest wash             */

  /* ---------------------------------------------------------
     INK — text and dark surfaces
     --------------------------------------------------------- */
  --ink-900: #1A1A2E;      /* page backdrop, headings           */
  --ink-700: #2F2C35;      /* modal titles                      */
  --ink-600: #444149;      /* body text                         */
  --ink-500: #3D3D3D;      /* body text alt                     */
  --ink-400: #6D6B72;      /* secondary text                    */
  --ink-300: #828086;      /* captions, placeholders            */
  --ink-250: #9090B0;      /* muted on purple surfaces          */
  --ink-200: #B0A8D0;      /* faintest label                    */

  /* ---------------------------------------------------------
     SURFACE & BORDER
     --------------------------------------------------------- */
  --surface-white: #FFFFFF;
  --surface-white-warm: #FEFEFE;
  --surface-canvas: #FAF8F5;   /* the phone's own background    */
  --surface-grey: #F2F2F6;     /* list / settings background    */
  --border-weak: #EAEAEB;
  --border-medium: #D5D5D7;

  /* ---------------------------------------------------------
     SEMANTIC
     --------------------------------------------------------- */
  --color-success: #22C55E;
  --color-success-dark: #26AA68;
  --color-danger: #E24533;
  --color-accent-pink: #F4A4C0;

  /* ---------------------------------------------------------
     SEMANTIC ALIASES — prefer these in screen CSS
     --------------------------------------------------------- */
  --color-primary:          var(--purple-700);
  --color-primary-pressed:  var(--purple-900);
  --color-primary-soft:     var(--purple-400);
  --color-primary-surface:  var(--purple-75);
  --color-on-primary:       var(--surface-white);

  --color-text:             var(--ink-600);
  --color-text-strong:      var(--ink-900);
  --color-text-muted:       var(--ink-300);
  --color-bg:               var(--surface-canvas);
  --color-card:             var(--surface-white);

  /* ---------------------------------------------------------
     GRADIENTS
     --------------------------------------------------------- */
  --gradient-primary: linear-gradient(135deg, #b194ff 0%, #9067ff 50%, #703aff 100%);
  --gradient-toast:   linear-gradient(135deg, #2D1B69, #1E1346);

  /* ---------------------------------------------------------
     TYPOGRAPHY
     --------------------------------------------------------- */
  --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', sans-serif;

  /* Bảy bậc, bước 2px, sàn 10px. Thang cũ có 12 bậc kể cả 9/11/13/15 —
     quá dày để chọn đúng và đẻ ra cỡ chữ lẻ. Không dùng cỡ ngoài bảng này. */
  --text-2xs: 10px;    /* badge, overline — nhỏ nhất cho phép     */
  --text-xs:  12px;    /* caption, meta, timestamp                */
  --text-s:   14px;    /* body                                    */
  --text-m:   16px;    /* button, tiêu đề card                    */
  --text-l:   18px;    /* tiêu đề mục                             */
  --text-xl:  20px;
  --text-2xl: 24px;    /* số liệu hero                            */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;   /* the workhorse                    */
  --weight-bold: 700;

  /* ---------------------------------------------------------
     RADIUS
     --------------------------------------------------------- */
  --radius-xs: 6px;
  --radius-s:  8px;
  --radius-m:  12px;   /* most common                           */
  --radius-l:  16px;
  --radius-xl: 20px;
  --radius-pill: 100px;

  /* ---------------------------------------------------------
     SPACING — 4pt scale
     --------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;

  /* ---------------------------------------------------------
     ELEVATION
     --------------------------------------------------------- */
  --shadow-card:  0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-fab:   0 4px 16px rgba(0, 0, 0, 0.18), 0 1px 4px rgba(0, 0, 0, 0.1);
  --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.16);
  --shadow-phone: 0 40px 80px rgba(0, 0, 0, 0.6);

  /* ---------------------------------------------------------
     MOTION
     --------------------------------------------------------- */
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-screen: 300ms;   /* .screen crossfade               */
  --duration-sheet: 220ms;

  /* ---------------------------------------------------------
     PHONE SHELL
     --------------------------------------------------------- */
  --phone-width: 375px;
  --phone-height: 812px;
  --phone-radius: 50px;
}