fix(card): fix tokens on ionic theme (#30441)

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Updated typography tokens.
- Added border styles and CSS variables for easier customization.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

[Ionic theme
card](https://ionic-framework-git-rou-11968-card-ionic1.vercel.app/src/components/card/test/theme-ionic)

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>

core/src/components/card-content/card-content.ionic.scss

@@ -6,16 +6,13 @@
 
 .card-content-ionic {
   @include globals.padding(globals.$ion-space-400);
+  @include globals.typography(globals.$ion-body-md-regular);
 
   display: flex;
 
   flex-direction: column;
 
-  font-size: globals.$ion-font-size-350;
-
-  line-height: globals.$ion-font-line-height-600;
-
-  gap: globals.$ion-space-200;
+  gap: globals.$ion-space-400;
 
   img {
     @include globals.margin(globals.$ion-space-200, 0, globals.$ion-space-200, 0);

core/src/components/card/card.ionic.scss

@@ -6,8 +6,14 @@
 
 :host {
   --background: #{globals.$ion-primitives-base-white};
-  --border-radius: #{globals.$ion-border-radius-400};
+  --border-width: #{globals.$ion-border-size-025};
+  --border-color: #{globals.$ion-border-default};
+  --border-style: #{globals.$ion-border-style-solid};
+  --border-radius: #{globals.$ion-round-xl};
   --color: #{globals.$ion-primitives-neutral-1200};
+  min-width: globals.$ion-scale-2400;
+
+  border: var(--border-width) var(--border-style) var(--border-color);
 }
 
 ::slotted(img) {
@@ -18,9 +24,13 @@
 // ---------------------------------------------
 
 :host(.card-soft) {
-  --border-radius: #{globals.$ion-border-radius-200};
+  --border-radius: #{globals.$ion-soft-xl};
+}
+
+:host(.card-round) {
+  --border-radius: #{globals.$ion-round-xl};
 }
 
 :host(.card-rectangular) {
-  --border-radius: #{globals.$ion-border-radius-0};
+  --border-radius: #{globals.$ion-rectangular-xl};
 }

core/src/components/card/test/theme-ionic/index.html

@@ -32,7 +32,7 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-content class="ionic-padding-space-400" id="content" no-bounce>
+      <ion-content class="ion-padding-space-400" id="content" no-bounce>
         <h4>Preview options</h4>
 
         <p>