Feature: Shell design tokens and selected nav contrast

  As the maintainer of RenewCMS
  I want the new --rc-* tokens in the SPA and every selected nav item drawn in sand with on-sand text
  So that the sidebar and drawer stay readable in both themes and match docs/design

  Background:
    Given web/src/assets/main.css declares the --rc-* tokens of docs/design/foundations.md
      "New tokens", light values in :root and dark values in .dark
    And DashboardShell renders the nav from web/src/components/DashboardShell.vue, with "Settings"
      as the parent row (/settings) and a "Media" group holding "Variants"
      (/settings/media/variants) and "Cache" (/settings/media/cache)
    And the session role is "owner", so the Settings children are present
    And a selected row is a link whose route is current, carrying aria-current="page"

  Scenario Outline: The new tokens exist with the values given in foundations.md
    When web/src/assets/main.css is loaded in the <theme> theme
    Then <token> resolves to <value>

    Examples:
      | token             | theme | value                                                            |
      | --rc-sand         | light | #e8dfd1                                                          |
      | --rc-sand         | dark  | #d4c5b0                                                          |
      | --rc-on-sand      | light | #111111                                                          |
      | --rc-on-sand      | dark  | #111111                                                          |
      | --rc-success-soft | light | #eaefea                                                          |
      | --rc-success-soft | dark  | #1f241f                                                          |
      | --rc-info-soft    | light | #ebeef0                                                          |
      | --rc-info-soft    | dark  | #202428                                                          |
      | --rc-warning-soft | light | #f0ede6                                                          |
      | --rc-warning-soft | dark  | #2a251e                                                          |
      | --rc-error-soft   | light | #f3eae9                                                          |
      | --rc-error-soft   | dark  | #2c201f                                                          |
      | --rc-overlay      | light | rgb(10 10 10 / 0.4)                                              |
      | --rc-overlay      | dark  | rgb(0 0 0 / 0.6)                                                 |
      | --rc-shadow-pop   | light | 0 4px 16px rgb(17 17 17 / 0.08), 0 1px 2px rgb(17 17 17 / 0.06) |
      | --rc-shadow-pop   | dark  | 0 4px 16px rgb(0 0 0 / 0.5)                                      |
      | --rc-shadow-modal | light | 0 16px 48px rgb(17 17 17 / 0.18)                                 |
      | --rc-shadow-modal | dark  | 0 16px 48px rgb(0 0 0 / 0.6)                                     |

  Scenario: No --ui-* token and no --rc-canvas are introduced
    When web/src/assets/main.css is compared with docs/design/foundations.md
    Then no --ui-* token value is changed
    And --rc-canvas is not declared

  Scenario Outline: N1 Parent selected: Settings is filled in sand with on-sand text and icon
    Given the current route is /settings
    And the theme is <theme>
    When DashboardShell renders the desktop sidebar
    Then the "Settings" row has aria-current="page"
    And its background is --rc-sand and its label and icon colour are --rc-on-sand
    And the "Media" group is visible with "Variants" and "Cache" unselected
    And neither child row uses --rc-sand

    Examples:
      | theme |
      | light |
      | dark  |

  Scenario Outline: N2 and N3 Child selected: the child is filled and the parent is unfilled and bold
    Given the current route is <path>
    And the theme is <theme>
    When DashboardShell renders the desktop sidebar
    Then the "<child>" row has aria-current="page", background --rc-sand and label and icon colour --rc-on-sand
    And the "Settings" row is not filled, has no aria-current, uses --ui-text-highlighted at weight 500 and shows the chevron pointing down
    And the other child row is not filled

    Examples:
      | path                     | child    | theme |
      | /settings/media/variants | Variants | light |
      | /settings/media/variants | Variants | dark  |
      | /settings/media/cache    | Cache    | light |
      | /settings/media/cache    | Cache    | dark  |

  Scenario Outline: Hover, focus and active on a selected row keep sand and on-sand
    Given the "<row>" row is selected on <path>
    And the theme is <theme>
    When the row is <interaction>
    Then its background stays --rc-sand and its label and icon colour stay --rc-on-sand
    And no white or --ui-text-muted colour is applied to its label or icon

    Examples:
      | row      | path                     | interaction   | theme |
      | Settings | /settings                | hovered       | dark  |
      | Settings | /settings                | focus-visible | dark  |
      | Settings | /settings                | pressed       | dark  |
      | Settings | /settings                | hovered       | light |
      | Variants | /settings/media/variants | hovered       | dark  |
      | Variants | /settings/media/variants | pressed       | light |
      | Cache    | /settings/media/cache    | focus-visible | dark  |

  Scenario: Focus on a selected row adds a 2 px --ui-primary outline
    Given the "Settings" row is selected on /settings
    When the row receives keyboard focus
    Then it has a 2 px --ui-primary focus outline
    And its background is still --rc-sand

  Scenario Outline: N4 and N5 The mobile drawer uses the same selected treatment
    Given the viewport is 390 x 844 and the theme is <theme>
    And the current route is <path>
    When the Menu button is activated
    Then the drawer rows are 44 px tall
    And the "<selected>" row has aria-current="page", background --rc-sand and label and icon colour --rc-on-sand
    And <parent_state>

    Examples:
      | path                     | selected | parent_state                                         | theme |
      | /settings                | Settings | the Media group lists Variants and Cache, unselected | light |
      | /settings                | Settings | the Media group lists Variants and Cache, unselected | dark  |
      | /settings/media/variants | Variants | the "Settings" row is unfilled and bold              | light |
      | /settings/media/variants | Variants | the "Settings" row is unfilled and bold              | dark  |

  Scenario Outline: Other selected nav items use the same pairing
    Given the current route is <path> and the theme is dark
    When DashboardShell renders
    Then the "<row>" row has background --rc-sand and label and icon colour --rc-on-sand

    Examples:
      | path      | row      |
      | /home     | Home     |
      | /users    | Users    |
      | /activity | Activity |