/* SpeakPen Design Tokens — Single source of truth for Web, iOS & Android */

:root {
  /* Brand */
  --brand: #C9802B;
  --brand-dark: #A86A22;
  --brand-light: #E8B96E;
  --brand-bg: #FFF5E6;
  --brand-glow: rgba(201, 128, 43, 0.15);

  /* Accent */
  --accent: #214E73;
  --accent-2: #3A6C84;
  --accent-light: #9BC4E8;
  --accent-bg: #EBF3FA;

  /* Surfaces */
  --bg: #FAF7F1;
  --bg-glow: #F6EDDC;
  --surface: #FFFFFF;
  --field-bg: #F8F2E8;
  --field-stroke: #E5DACB;
  --chip-bg: #F4EDE0;
  --chip-selected: #E5D8C6;
  --chip-stroke: #E6DAC9;

  /* Text */
  --text: #1C1A17;
  --text-2: #5F5952;
  --text-3: #8B847B;

  /* Structure */
  --border: #E0D6C8;
  --divider: #E4DCCF;
  --card-bg: #FFFFFF;
  --card-stroke: #E8DFCF;

  /* Functional */
  --success: #1F8A70;
  --success-bg: #E6F5F0;
  --danger: #D64545;
  --danger-bg: #FFF0F0;
  --warning: #B7791F;

  /* Shadows */
  --shadow: rgba(201, 128, 43, 0.07);
  --shadow-card: rgba(0, 0, 0, 0.06);
  --shadow-float: rgba(0, 0, 0, 0.12);
  --overlay: rgba(0, 0, 0, 0.4);

  /* Radii */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* Nav glass */
  --nav-bg: rgba(250, 247, 241, 0.82);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Brand */
    --brand: #D79B47;
    --brand-dark: #C1883A;
    --brand-light: #E8B96E;
    --brand-bg: rgba(215, 155, 71, 0.15);
    --brand-glow: rgba(215, 155, 71, 0.2);

    /* Accent */
    --accent: #9BC4E8;
    --accent-2: #7FA8BF;
    --accent-light: #9BC4E8;
    --accent-bg: rgba(155, 196, 232, 0.1);

    /* Surfaces */
    --bg: #121110;
    --bg-glow: #1C1814;
    --surface: #1A1816;
    --field-bg: #201D1A;
    --field-stroke: #2E2A25;
    --chip-bg: #221F1C;
    --chip-selected: #2C2825;
    --chip-stroke: #34302B;

    /* Text */
    --text: #F5F1EA;
    --text-2: #B8B1A8;
    --text-3: #8E877E;

    /* Structure */
    --border: #3A342E;
    --divider: #352F29;
    --card-bg: #242119;
    --card-stroke: #443D34;

    /* Functional */
    --success: #3ED7B4;
    --success-bg: rgba(62, 215, 180, 0.1);
    --danger: #F27373;
    --danger-bg: rgba(242, 115, 115, 0.1);
    --warning: #F1B34C;

    /* Shadows */
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-card: rgba(0, 0, 0, 0.35);
    --shadow-float: rgba(0, 0, 0, 0.5);
    --overlay: rgba(0, 0, 0, 0.6);

    /* Nav glass */
    --nav-bg: rgba(21, 19, 17, 0.85);
  }
}