/* ============================================================
   Premier Brands of America — Color tokens
   One red leads. Black, navy, and gray support.
   White is the primary surface; red punctuates.
   ============================================================ */
:root {
  /* ---- Brand primary ---- */
  --premier-red: #C10230;        /* the sole primary — accent, never a flood */
  --premier-red-rgb: 193 2 48; /* @kind other */

  /* ---- Supporting palette ---- */
  --premier-black: #1A1A1A;      /* primary text, ink, UI */
  --premier-navy: #1F315B;       /* depth, dividers, trust */
  --mid-gray: #808080;           /* captions, structure, rules */

  /* ---- Neutrals ---- */
  --light-gray: #E9E9E9;
  --cream: #FFFDE1;
  --white: #FFFFFF;

  /* ---- Extended neutral ramp (derived, for UI surfaces) ---- */
  --gray-50:  #FAFAFA;
  --gray-100: #F2F2F2;
  --gray-200: #E9E9E9;
  --gray-300: #D6D6D6;
  --gray-400: #B0B0B0;
  --gray-500: #808080;
  --gray-600: #5C5C5C;
  --gray-700: #3D3D3D;
  --gray-800: #262626;
  --gray-900: #1A1A1A;

  /* ---- Red tints/shades (UI states for the primary) ---- */
  --red-hover: #A50127;          /* darker red on hover */
  --red-active: #8A0120;         /* darker still on press */
  --red-tint: #FBE6EA;           /* faint red wash for backgrounds */

  /* ---- Semantic — digital states ONLY, never brand expression ---- */
  --success: #2E7D32;
  --warning: #F57C00;
  --error:   #C62828;
  --info:    #1976D2;

  /* ============================================================
     Semantic aliases — reach for these in components
     ============================================================ */
  --color-accent: var(--premier-red);
  --color-accent-hover: var(--red-hover);
  --color-accent-active: var(--red-active);

  --text-primary: var(--premier-black);
  --text-secondary: var(--gray-600);
  --text-muted: var(--mid-gray);
  --text-on-accent: var(--white);
  --text-on-dark: var(--white);
  --text-link: var(--premier-red);

  --surface-page: var(--white);
  --surface-card: var(--white);
  --surface-subtle: var(--gray-50);
  --surface-sunken: var(--gray-100);
  --surface-cream: var(--cream);
  --surface-dark: var(--premier-navy);
  --surface-accent: var(--premier-red);

  --border-default: var(--light-gray);
  --border-strong: var(--gray-300);
  --border-dark: var(--premier-navy);
}